{"componentChunkName":"component---src-templates-post-js","path":"/blog/deno-introduce","webpackCompilationHash":"c021816e17e59e08b77b","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🐍 新技术尝个鲜 - deno","tips":[],"categories":["code"],"datetime":"2020-07-20 20:28:12","noFooter":false,"description":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜","plainTextDescription":"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='195'%3e%3cpath%20d='M84%2053c-42%2015-38%2075%206%2083%2042%208%2068-46%2036-74a43%2043%200%2000-42-9m-1%2031l-4%203c2%202%200%203-1%202-2-2-6%204-6%207%201%207%2012%209%2023%206l4-1c1%201-1%203-2%203s-2%204-1%2014v15l5-1%2010-2%205-1v-10c-2-20-4-27-10-32-5-5-15-7-23-3'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.051851851851852,"src":"/static/6ecc1d3a3f78edafaddd14a519392e6f/3e1cc/banner.png","srcSet":"/static/6ecc1d3a3f78edafaddd14a519392e6f/82675/banner.png 500w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/fef60/banner.png 1000w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/3e1cc/banner.png 1108w","srcWebp":"/static/6ecc1d3a3f78edafaddd14a519392e6f/da798/banner.webp","srcSetWebp":"/static/6ecc1d3a3f78edafaddd14a519392e6f/7fe04/banner.webp 500w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/d619e/banner.webp 1000w,\n/static/6ecc1d3a3f78edafaddd14a519392e6f/da798/banner.webp 1108w","sizes":"(max-width: 1108px) 100vw, 1108px"}}},"bannerCredit":null,"slug":"/blog/deno-introduce","tags":["deno"]},"headings":[{"value":"〇、背景","depth":2},{"value":"一、Deno 吸引我的地方","depth":2},{"value":"二、Show me the code","depth":2},{"value":"写一个本地的程序","depth":3},{"value":"最后","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"deno-introduce\",\n  \"title\": \"🐍 新技术尝个鲜 - deno\",\n  \"date\": \"2020-07-20 20:28:12\",\n  \"author\": \"Ubug\",\n  \"description\": \"Deno 刚发布的时候就关注到了，感觉还是很有前景的，面向未来，现在尝个鲜\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"deno\"],\n  \"banner\": \"./banner.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u3007\\u3001\\u80CC\\u666F\"), mdx(\"p\", null, \"Node.js \\u662F\\u4E00\\u4E2A\\u4E86\\u4E0D\\u8D77\\u7684\\u5E94\\u7528\\uFF0C\\u5C06 JavaScript \\u8FD9\\u4E2A\\u504F\\u5C45\\u4E00\\u9685\\u7684\\u811A\\u672C\\uFF0C\\u53D8\\u6210\\u4E86\\u9886\\u57DF\\u8FB9\\u754C\\u975E\\u5E38\\u5E7F\\u9614\\u7684\\u5E94\\u7528\\u8BED\\u8A00\\uFF0C\\u5C31\\u8FD9\\u4E00\\u70B9\\u6765\\u8BF4\\u600E\\u4E48\\u5938\\u8D5E\\u90FD\\u4E0D\\u4E3A\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u524D\\u4E9B\\u5E74 Node.js \\u5728\\u4EC5\\u6709\\u7684 ES \\u6807\\u51C6\\u4E0B\\u53D1\\u5C55\\u58EE\\u5927\\uFF0C\\u4E0D\\u8FC7\\u8FD1\\u4E9B\\u5E74\\u968F\\u7740 ES \\u6807\\u51C6\\u7684\\u6F14\\u8FDB\\uFF0CTypeScript \\u7684\\u5E7F\\u6CDB\\u5E94\\u7528\\uFF0CNode.js \\u66FE\\u7ECF\\u5F15\\u4EE5\\u4E3A\\u50B2\\u7684\\u751F\\u6001\\uFF0C\\u9010\\u6E10\\u7684\\u53D8\\u5F97\\u62D6\\u540E\\u817F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4E0E\\u6211\\u800C\\u8A00\\u5F71\\u54CD\\u6BD4\\u8F83\\u5927\\uFF0C\\u8BA9\\u6211\\u4E0D\\u592A\\u4E60\\u60EF\\u3001\\u4E0D\\u592A\\u559C\\u6B22\\u7684\\u6709\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"TypeScript \\u7684\\u96C6\\u6210\\u4E0D\\u592A\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise\\u3001await \\u7B49\\u8BED\\u6CD5\\u751F\\u6001\\u7684\\u7F3A\\u5931\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"CommonJS \\u548C ES Module \\u7684\\u6CA1\\u6CD5\\u517C\\u5BB9\")), mdx(\"p\", null, \"\\u529F\\u80FD\\u7684\\u652F\\u6301\\u90FD\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u8003\\u8651\\u5230\\u592A\\u7075\\u6D3B\\u3001\\u5386\\u53F2\\u517C\\u5BB9\\u3001\\u7B2C\\u4E09\\u65B9\\u5E93\\u7B49\\u539F\\u56E0\\uFF0C\\u8FD8\\u662F\\u5199\\u8D77\\u6765\\u987E\\u5FCC\\u592A\\u591A\\uFF0C\\u8FD9\\u867D\\u7136\\u4E0D\\u662F Node.js \\u7684\\u9519\\uFF0C\\u4F46\\u662F\\u7528\\u8D77\\u6765\\u4E0D\\u8212\\u670D\\u8FD9\\u4E2A\\u6CA1\\u529E\\u6CD5\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"node = no + de => deno = de(story) no(de)\\n\")), mdx(\"p\", null, \"\\u6240\\u4EE5 deno \\u88AB\\u5F00\\u53D1\\u51FA\\u6765\\uFF0C\\u76EE\\u6807\\u5C31\\u662F\\u7528\\u6765\\u66FF\\u4EE3 node.js\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001Deno \\u5438\\u5F15\\u6211\\u7684\\u5730\\u65B9\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E TypeScript \\u5F15\\u64CE\\uFF0C\\u76F4\\u63A5\\u652F\\u6301 ts \\u8BED\\u8A00\\u7684\\u89E3\\u91CA\\u8FD0\\u884C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Rust \\u7684\\u5E94\\u7528\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u7B97\\u662F\\u975E\\u5E38\\u706B\\u70ED\\u7684\\u8BED\\u8A00\\uFF0C\\u5F88\\u611F\\u5174\\u8DA3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E25\\u683C\\u7684\\u6743\\u9650\\u7BA1\\u63A7\\uFF0C\\u5982\\u679C node.js \\u8BFB\\u53D6\\u672C\\u5730\\u6587\\u4EF6\\u4E0A\\u4F20\\u5230\\u67D0\\u4E2A\\u670D\\u52A1\\u5668\\u6211\\u662F\\u6CA1\\u529E\\u6CD5\\u4E8B\\u5148\\u63A7\\u5236\\u7684\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u66F4\\u517C\\u5BB9 Web \\u89C4\\u8303\\u7684\\u63A5\\u53E3\\u8BBE\\u8BA1\\uFF0Cwindow\\u3001fetch\\u3001addEventListener \\u7684\\u80FD\\u529B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Promise > callback\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"ES Module \\u6A21\\u5757\\u89C4\\u8303\\uFF0C\\u66F4\\u9762\\u5411\\u6807\\u51C6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5185\\u7F6E dev \\u5F00\\u53D1\\u547D\\u4EE4\")), mdx(\"h2\", null, \"\\u4E8C\\u3001Show me the code\"), mdx(\"p\", null, \"mac \\u4E0B\\u8FD0\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-shell\"\n  }, \"curl -fsSL https://deno.land/x/install/install.sh | sh\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"22.007722007722005%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAAAsSAAALEgHS3X78AAAAv0lEQVQY002O2wqDMBiDfQxRFC9EQVoPqKj1gNOpqO//PJn52WAXH6FNmsYqigLXdWGeZxzHgfM8sW3bw/urm3hd16GqKtR1LUqapkHbtijLEuxRSsHSWmMYBjGpDCilkaapBOI4Rp7nyLJM4B3f0Pd9H7Ztw3EcwXVdWAys64pxHLHvuyzimUzThGVZcd+3LGI2SRIp5idBEEjpP1YURTB9j/7h9VqegkWKiDFGFnM9c1zLwjAMZZHneVLyU/IBwvV+fVr7rUkAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"安装成功\",\n    \"title\": \"安装成功\",\n    \"src\": \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png\",\n    \"srcSet\": [\"/static/b28490ac5b3c8125a17024dfbe2fc7b7/2c191/deno-1.png 259w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/86b01/deno-1.png 518w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/0dc48/deno-1.png 1035w\", \"/static/b28490ac5b3c8125a17024dfbe2fc7b7/6fb1e/deno-1.png 1408w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5B89\\u88C5\\u6210\\u529F\"), \"\\n  \")), mdx(\"p\", null, \"\\u73B0\\u5728\\u5B89\\u88C5\\u6210\\u529F\\uFF0C\\u90A3\\u4E48\\u8BD5\\u8BD5\\u7B80\\u5355\\u8FD0\\u884C\\u4E00\\u4E2A\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u7528\\u6700\\u7ECF\\u5178\\u7684\\u8FDC\\u7AEF\\u6587\\u4EF6\\u5F62\\u5F0F\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"15.83011583011583%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAmklEQVQI11VO0QrDIBDrd7RIUXF7sFWZW1c6nVSF/v8XZTuhgz2E5MjdJR3jAso6rNsG7z1CCLDWQmvd2BgD59xPT9MEzjn6vscwDH9gjKG7LBLXIrGkB1JMiDEgpYRaK0opOI4DOeem931vofM8t8cUdGqCEAKdvmk884p3eH3bRRh/byYtUiMCtaVZKYVxHFtDOpZSNj5B3gepp1vzmtAZVQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"运行成功\",\n    \"title\": \"运行成功\",\n    \"src\": \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png\",\n    \"srcSet\": [\"/static/2705379a8c65587d9d9e1613f74621f7/2c191/deno-2.png 259w\", \"/static/2705379a8c65587d9d9e1613f74621f7/86b01/deno-2.png 518w\", \"/static/2705379a8c65587d9d9e1613f74621f7/0dc48/deno-2.png 1035w\", \"/static/2705379a8c65587d9d9e1613f74621f7/ee5bc/deno-2.png 1448w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u8FD0\\u884C\\u6210\\u529F\"), \"\\n  \")), mdx(\"h3\", null, \"\\u5199\\u4E00\\u4E2A\\u672C\\u5730\\u7684\\u7A0B\\u5E8F\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { serve } from \\\"https://deno.land/std@0.62.0/http/server.ts\\\";\\nconst s = serve({ port: 8000 });\\nconsole.log(\\\"http://localhost:8000/\\\");\\nfor await (const req of s) {\\n  req.respond({ body: \\\"Hello World\\\\n\\\" });\\n}\\n\\n\")), mdx(\"h2\", null, \"\\u6700\\u540E\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u4ECE Node.js \\u5207\\u6362\\u5230 Deno \\u8FD8\\u592A\\u65E9\\uFF0C\\u751F\\u6001\\u3001\\u7A33\\u5B9A\\u6027\\u3001\\u5468\\u8FB9\\u652F\\u6301\\u7B49\\u8FD8\\u4E0D\\u5B8C\\u5584\\uFF0C\\u516C\\u53F8\\u7684\\u4E1A\\u52A1\\u7528 Node.js \\u662F\\u66F4\\u5408\\u9002\\u7684\\u9009\\u62E9\\uFF0C\\u4E91\\u670D\\u52A1\\u5546\\u7684 Serverless \\u4E4B\\u7C7B\\u7684\\u670D\\u52A1\\u76EE\\u524D\\u4E5F\\u53EA\\u63D0\\u4F9B Node.js \\u7684\\u73AF\\u5883\\uFF0C\\u5176\\u4E2D\\u7684\\u5F88\\u591A\\u7279\\u6027\\uFF0C\\u6BD4\\u5982 URL \\u7684\\u6A21\\u5757\\u52A0\\u8F7D\\u5F62\\u5F0F\\u7B49\\uFF0C\\u5728\\u5206\\u53D1\\u3001\\u90E8\\u7F72\\u3001\\u5927\\u89C4\\u6A21\\u7BA1\\u7406\\u4E0A\\u5408\\u4E0D\\u5408\\u9002\\u7B49\\uFF0C\\u5F88\\u591A\\u5F00\\u53D1\\u8005\\u5176\\u5B9E\\u90FD\\u5728\\u89C2\\u671B\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u548C Flutter \\u4E00\\u6837\\uFF0C\\u6211\\u8FD8\\u662F\\u5F88\\u770B\\u597D Deno \\u7684\\uFF0C\\u6BD5\\u7ADF\\u770B\\u7740\\u5C31\\u6709\\u5E0C\\u671B\\u7684\\u6837\\u5B50\\u5F88\\u96BE\\u4E0D\\u559C\\u6B22\\u8D77\\u6765\\uFF0C\\u4E5F\\u613F\\u610F\\u82B1\\u65F6\\u95F4\\u5C1D\\u8BD5\\u5E76\\u96C6\\u6210\\u5728\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u4E2D\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"8f37d124-ec81-52a3-85ef-12560d306667","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/fluent-acrylic/fluent-acrylic.md","id":"6505615e-7a9b-518c-b5c4-380c5d6add61","parent":{"name":"fluent-acrylic","sourceInstanceName":"blog"},"excerpt":"IOS 上的背景模糊效果真的非常的惊艳，从 CSS backdrop-filter 这个属性可用以来就实验性的玩过，除了兼容性问题上硬伤(目前 86% 左右，尤其是国内 X5 内核等魔改内核（微信和很多 APP 内置的浏览器）)，效果还是很不错的。 一、什么是亚克力 前两天又看到了微软的 Fluent Design，Fluent Design System 可帮助你创建包含光线、深度、动画、材料和比例的现代粗体 UI。 其中看到了 UWP 设计和 UI…","fields":{"title":"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力","slug":"/blog/fluent-acrylic","description":"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。","date":"2020-08-05","redirects":null,"datetime":"2020-08-05 19:18:10","categories":["code"],"series":null,"tags":["css","acrylic","UI-Library"],"status":"online"},"frontmatter":{"published":null,"tags":["css","acrylic","UI-Library"],"theme":null,"slug":"fluent-acrylic","date":"2020-08-05 19:18:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"fluent-acrylic\",\n  \"title\": \"🐏 Web 实现 Fluent UI 的 Acrylic 亚克力效果和组件库的能力\",\n  \"date\": \"2020-08-05 19:18:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"CSS 的能力已经很强大了，前两天看到了微软的 FluentDesign，尝试用 CSS 实现下。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"css\", \"acrylic\", \"UI-Library\"]\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"IOS \\u4E0A\\u7684\\u80CC\\u666F\\u6A21\\u7CCA\\u6548\\u679C\\u771F\\u7684\\u975E\\u5E38\\u7684\\u60CA\\u8273\\uFF0C\\u4ECE CSS backdrop-filter \\u8FD9\\u4E2A\\u5C5E\\u6027\\u53EF\\u7528\\u4EE5\\u6765\\u5C31\\u5B9E\\u9A8C\\u6027\\u7684\\u73A9\\u8FC7\\uFF0C\\u9664\\u4E86\\u517C\\u5BB9\\u6027\\u95EE\\u9898\\u4E0A\\u786C\\u4F24(\\u76EE\\u524D 86% \\u5DE6\\u53F3\\uFF0C\\u5C24\\u5176\\u662F\\u56FD\\u5185 X5 \\u5185\\u6838\\u7B49\\u9B54\\u6539\\u5185\\u6838\\uFF08\\u5FAE\\u4FE1\\u548C\\u5F88\\u591A APP \\u5185\\u7F6E\\u7684\\u6D4F\\u89C8\\u5668\\uFF09)\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u5F88\\u4E0D\\u9519\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4EC0\\u4E48\\u662F\\u4E9A\\u514B\\u529B\"), mdx(\"p\", null, \"\\u524D\\u4E24\\u5929\\u53C8\\u770B\\u5230\\u4E86\\u5FAE\\u8F6F\\u7684 Fluent Design\\uFF0CFluent Design System \\u53EF\\u5E2E\\u52A9\\u4F60\\u521B\\u5EFA\\u5305\\u542B\\u5149\\u7EBF\\u3001\\u6DF1\\u5EA6\\u3001\\u52A8\\u753B\\u3001\\u6750\\u6599\\u548C\\u6BD4\\u4F8B\\u7684\\u73B0\\u4EE3\\u7C97\\u4F53 UI\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u770B\\u5230\\u4E86 UWP \\u8BBE\\u8BA1\\u548C UI \\u4E2D\\u4ECB\\u7ECD\\u7684\\u4E00\\u4E2A\\u6548\\u679C\\uFF1A\\u4E9A\\u514B\\u529B\\u6750\\u6599\\u3002Acrylic \\u662F\\u4E00\\u79CD Fluent Design \\u7CFB\\u7EDF\\u7EC4\\u4EF6\\uFF0C\\u7528\\u4E8E\\u5728\\u4F60\\u7684\\u5E94\\u7528\\u4E2D\\u6DFB\\u52A0\\u7269\\u7406\\u7EB9\\u7406\\uFF08\\u6750\\u6599\\uFF09\\u548C\\u6DF1\\u5EA6\\u3002 \"), mdx(\"p\", null, \"\\u8BE6\\u7EC6\\u53EF\\u4EE5\\u67E5\\u770B\\u5177\\u4F53\\u7684\\u6587\\u7AE0\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://docs.microsoft.com/zh-cn/windows/uwp/design/style/acrylic\"\n  }, \"\\u4E9A\\u514B\\u529B\\u6750\\u6599\")), mdx(\"div\", {\n    \"style\": {},\n    \"\\\"flex\\\",\": \"\",\n    \"justifycontent:\": \"\",\n    \"\\\"space-around\\\"}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {},\n    \"\\\"40%\\\"}}\": \"\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAACqklEQVQozwGfAmD9ALaMdLqReL6Sd8umkdS0oNaznNm2nt25nuG7ntWwodu2oOW/oeO/o+K+o+C9ouDApdGxmsObg7+ZhL+XfwCTcWuWc2+ne3HPta3i1dDfzsngzcnizMfiycXixsTixsTgxsXdx8bbyMfayMfdz8/Mr6uweXG7hHO/hXAAmFtXqGNctWhe1Kag48rF48O85cS76cS57MW37si07siz7ca27Me36se66Ma66MvB5K2Z3XpV3H9Z34FbAMVmR85rSNpsQ+Snj+rLvu7GtfHJtfHLs/HSsvHhuPHiuPLUs/LPtfHOtfHMte/Qvve4kf6OR/uMS7toNwAyIRxLNjFeQDmumJLVx8LXwrvdxr3gxrzky7nt1r/t17/lzbrfyLvgyb7gyb7hz8bRrp5zRC9BJhkcEQwAKysvNDM5PTk/k4+RwLy9urW2wbq7wbm5w7W1z7e11r26xLe2saysurW0xb++0szKgoCBAAAAAQEBAwIDADU4QDY7RTg8SoqKkbm3uLSytLCur6yqq62oqa6mp6+nqKqlpqShoqakpKqnp7Wzs29tbQAAAAYFBAMCAgA9NjQ7NTNCNzaglZPMxsTIwL3Fvru6trXAurm6trWzsLCzsbGzsbGrqqunpqe0tLRycXIDAwMHBwgEBQUAHBoWHBoXNispmIB4xKacv6KYjoaEfXx9l46Nmo6NqZuYrZ+bqZ6am5SSkIyLlJGRaWhoPjg2Pjk4KCcnABQSDhQSDh0ZFjEmIzsqJGlBNmhEOG9IOotTQYBQQX1XS3ZXTWdSSmZTTGNSTFhLRkM8OkM8OkhBPTczMQAQDwwUEg4VExAiHBkrIyAtJiU3LStvRTnCXT2rW0OOW0p7WEtSQjxgTUZzXFFvXFJgUElUSUQ8ODcrKSnl7mS+tjR43gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"acrylic lighttheme base\",\n    \"title\": \"acrylic lighttheme base\",\n    \"src\": \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png\",\n    \"srcSet\": [\"/static/7e99683469c043683adf7eebe5c621ec/2c191/acrylic_lighttheme_base.png 259w\", \"/static/7e99683469c043683adf7eebe5c621ec/86b01/acrylic_lighttheme_base.png 518w\", \"/static/7e99683469c043683adf7eebe5c621ec/d5c83/acrylic_lighttheme_base.png 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u6D45\\u8272\\u4E3B\\u9898\\u4E9A\\u514B\\u529B\"), \"\\n  \"), \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {},\n    \"\\\"40%\\\"}}\": \"\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"800px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsSAAALEgHS3X78AAACmUlEQVQozxWOSU8TYQCGvwDFYAgtS/faZTrTWTrTTmdppx2mhbbTjRbK1tDpAgHlABVtRUCQgAt6kJCoEEQTIF44GK8kaCLhoDd/gQcO/gsvWpMn7+l9kgec7z64eL12dbB++vj2bq1wUJ86bBQ/PCyerBbf1ErvGuWPG+XTjerJevV4vXK0Vj7bufvj+MW3o2eXh9vgbX1xv770+clqLZ8UKVzmPHGaTHiJBIklcLRJnEAHCTxCEAMeMoBjC0Px862Vi6eNy5174KhUOJstfV2aW00Ppmn3BEdOsMQUi5Y4VzngrAScZR4p8WjRjxUDRI7BXuZDv7eUX5tT19sK+H4n+XMheV1PvUjROS9U4eEKD1UFezViqw4j/xm0TfdDVRGaEeFxDnpf9P3dz/55lfkyHwA+hyXD03OJ8GiICbpdCR+RYYkci48KLiXmVuLkWAjN8ljO7x4WqDhLLOeltTQbgQ1mTScgSZphhFhE9vt8TrsDhxEPinkQhIagftgRJVAf7LQajCjk4DwkT3sRhwOAFgBAa2sr4AIRPiiHo3kvxVgtVhhCbBar2WA06/QWrfaWTmfs6+vRdPf19Jj0epPB0KvuUrW1qNqabguQ/FyIYzKSGGa9KGSnMQR32m1mE2yzNteo0xl0+iYaTXdXl1qt6daoO292dLS331CpVMBi0jUvIS+lDPgVka5EWBKymo16nsAEApUDTEbkE0FOoEkv7iJRhMSQqBSSBAFDUaDtVWt71FaTnsWQCIXW5GAtJS5npb1C7Pl4fFvJPVLyi5O5hcLI/ORweSQth8WYGEoNSALrAxazsVnpsFncLpih3JyHavY30uLVdPjTjLxXzW5WRpWhxPxkfmW2eH+6UM7KY8moJPAUgf0DtWSpJElNYr8AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"acrylic darktheme base\",\n    \"title\": \"acrylic darktheme base\",\n    \"src\": \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png\",\n    \"srcSet\": [\"/static/162d07011c1c998885889471a98bd788/2c191/acrylic_darktheme_base.png 259w\", \"/static/162d07011c1c998885889471a98bd788/86b01/acrylic_darktheme_base.png 518w\", \"/static/162d07011c1c998885889471a98bd788/d5c83/acrylic_darktheme_base.png 800w\"],\n    \"sizes\": \"(max-width: 800px) 100vw, 800px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u9ED1\\u8272\\u4E3B\\u9898\\u7684\\u4E9A\\u514B\\u529B\"), \"\\n  \")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"903px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"54.05405405405405%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABg0lEQVQoz21S246bMBT0//9Tn9u+VepKWZUQEmCxffANbHwJ2W4nRvvUHaHR8WXsmYPZt++/fpyGn7+b040GkzsKF7G2fDlPTi3R++DcklKKMeacUZRSUBzMLhRaGXqdOvItt39G83qVr93b6TLO1i+rd85Z5yDb9/3+ib2CKanErLmcfcxlfwfz2Y5C4Qsxe++ttbdb35zPXUXTNG3bXiqYJcX1Os0wuak1kVm1daQUOJe7RU107a5A3/fDMIzjCJ6mCQVLNQn2IccWIxIaY42149sUNmT2Sils5ZzPFRgaY8CoGUmK25ZrNxAjxgQ9rKqKtUJrDc6fOLqF5GxsXmCR8wknPR4PTC3LU3zoUcMXxFg9DsLMwZhnuDCmFMIGYIwlyIikEBKpIKt2IvjjPzD8iBD8toWPv8A74kOvNYI7SYR48IIs8IllCA4+CtZ115vQvdAmFNjG5ZApbSShN0+3QogQQin3L27eIcgFX6zPCO3VT6WaOHFBUqpZaTyVL23/A80AbDQP4WSsAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"亚克力菜单背景\",\n    \"title\": \"亚克力菜单背景\",\n    \"src\": \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png\",\n    \"srcSet\": [\"/static/fd9b02a14dd73b475486e81c2da035d5/2c191/mail_transientcontextmenu.png 259w\", \"/static/fd9b02a14dd73b475486e81c2da035d5/86b01/mail_transientcontextmenu.png 518w\", \"/static/fd9b02a14dd73b475486e81c2da035d5/bc196/mail_transientcontextmenu.png 903w\"],\n    \"sizes\": \"(max-width: 903px) 100vw, 903px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u4E9A\\u514B\\u529B\\u83DC\\u5355\\u80CC\\u666F\"), \"\\n  \")), mdx(\"p\", null, \"\\u6700\\u540E\\u6574\\u4E2A\\u6548\\u679C\\u7684\\u5B9E\\u73B0\\uFF0C\\u6709\\u8BB2\\u9700\\u8981\\u51E0\\u4E2A\\u6548\\u679C\\u53E0\\u52A0\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1035px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/c342454691ca9b948e27e6ba0f286f4b/bb4cb/acrylicrecipe_diagram.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.37065637065637%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAAAAEEAv/EABQBAQAAAAAAAAAAAAAAAAAAAAL/2gAMAwEAAhADEAAAAbd3NAGF/wD/xAAZEAACAwEAAAAAAAAAAAAAAAABAgMEEiD/2gAIAQEAAQUCnZ91wRz/AP/EABgRAAIDAAAAAAAAAAAAAAAAAAECEBEh/9oACAEDAQE/AQu3H//EABcRAAMBAAAAAAAAAAAAAAAAABAREiH/2gAIAQIBAT8BrEP/xAAZEAACAwEAAAAAAAAAAAAAAAABEQAgQWH/2gAIAQEABj8CIZXIsr//xAAaEAEAAgMBAAAAAAAAAAAAAAABEBEAITFB/9oACAEBAAE/IaRDzxl0hFuEHpP/2gAMAwEAAgADAAAAEDsP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEDAQE/EE0H/8QAFxEAAwEAAAAAAAAAAAAAAAAAARARIf/aAAgBAgEBPxA3gv/EABoQAQADAQEBAAAAAAAAAAAAAAEAESExEHH/2gAIAQEAAT8QCK1A6Zuwu/LSu/WGEp6GuWQAKCvP/9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"如何设计 Acrylic\",\n    \"title\": \"如何设计 Acrylic\",\n    \"src\": \"/static/c342454691ca9b948e27e6ba0f286f4b/dcf47/acrylicrecipe_diagram.jpg\",\n    \"srcSet\": [\"/static/c342454691ca9b948e27e6ba0f286f4b/fca29/acrylicrecipe_diagram.jpg 259w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/f4507/acrylicrecipe_diagram.jpg 518w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/dcf47/acrylicrecipe_diagram.jpg 1035w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/cd483/acrylicrecipe_diagram.jpg 1553w\", \"/static/c342454691ca9b948e27e6ba0f286f4b/bb4cb/acrylicrecipe_diagram.jpg 1920w\"],\n    \"sizes\": \"(max-width: 1035px) 100vw, 1035px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5982\\u4F55\\u8BBE\\u8BA1 Acrylic\"), \"\\n  \")), mdx(\"p\", null, \"\\u6309\\u7167\\u8BF4\\u6CD5\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u6211\\u4EEC\\u5FAE\\u8C03 Acrylic \\u7684\\u5173\\u952E\\u7EC4\\u4EF6\\u4EE5\\u51F8\\u663E\\u5176\\u72EC\\u7279\\u5916\\u89C2\\u548C\\u5C5E\\u6027\\u3002 \\u6211\\u4EEC\\u4ECE\\u534A\\u900F\\u660E\\u5EA6\\u3001\\u6A21\\u7CCA\\u548C\\u566A\\u70B9\\u8BBE\\u7F6E\\u5F00\\u59CB\\uFF0C\\u4E3A\\u5E73\\u6ED1\\u56FE\\u9762\\u589E\\u6DFB\\u89C6\\u89C9\\u6DF1\\u5EA6\\u548C\\u7EF4\\u5EA6\\u3002 \\u6211\\u4EEC\\u6DFB\\u52A0\\u4E86\\u6392\\u9664\\u6DF7\\u5408\\u6A21\\u5F0F\\u5C42\\uFF0C\\u4EE5\\u786E\\u4FDD\\u653E\\u7F6E\\u5728 Acrylic \\u80CC\\u666F\\u4E0A\\u7684 UI \\u7684\\u5BF9\\u6BD4\\u5EA6\\u548C\\u53EF\\u8BFB\\u6027\\u3002 \\u6700\\u540E\\uFF0C\\u6211\\u4EEC\\u6DFB\\u52A0\\u4E86\\u5404\\u79CD\\u989C\\u8272\\u8272\\u8C03\\uFF0C\\u4EE5\\u4F9B\\u7528\\u6237\\u8FDB\\u884C\\u4E2A\\u6027\\u5316\\u8BBE\\u7F6E\\u3002 \\u8FD9\\u4E9B\\u56FE\\u5C42\\u534F\\u540C\\u4F5C\\u7528\\uFF0C\\u5F62\\u6210\\u4E86\\u5168\\u65B0\\u7684\\u5B9E\\u7528\\u6750\\u6599\\u3002\")), mdx(\"p\", null, \"\\u6240\\u4EE5\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u4E0D\\u4EC5\\u4EC5\\u662F\\u80CC\\u666F\\u6A21\\u7CCA\\uFF0C\\u8FD8\\u9700\\u8981\\u8003\\u8651\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u80CC\\u666F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6A21\\u7CCA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6392\\u9664\\u6DF7\\u5408\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u989C\\u8272/\\u8272\\u8C03\\u8986\\u76D6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u566A\\u70B9\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6548\\u679C\"), mdx(\"p\", null, \"CSS \\u6765\\u8BD5\\u8BD5\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u6548\\u679C\\uFF08\\u8BF7\\u4F7F\\u7528 Chrome V76+\\uFF1B\\u4ECE\\u5DE6\\u5230\\u53F3\\u4E3A\\u5404\\u4E2A\\u6548\\u679C\\u53E0\\u52A0\\u7684\\u8FC7\\u7A0B\\uFF1B\\u6E90\\u7801\\u5728\\u6700\\u4E0B\\u9762\\uFF09\\uFF1A\"), mdx(AcrylicEffect, {\n    mdxType: \"AcrylicEffect\"\n  }), mdx(\"p\", null, \"\\u5DE6\\u8FB9\\u7684\\u60AC\\u6D6E\\u83DC\\u5355\\u662F CSS \\u5B9E\\u73B0\\u7684\\uFF0C\\u770B\\u8D77\\u6765\\u8FD8\\u662F\\u5F88\\u7CBE\\u81F4\\u7684\\uFF1A\"), mdx(AcrylicEffect2, {\n    mdxType: \"AcrylicEffect2\"\n  }), mdx(AcrylicEffectStyle, {\n    mdxType: \"AcrylicEffectStyle\"\n  }), mdx(\"h2\", null, \"\\u4E09\\u3001\\u5B9E\\u73B0\\u8FC7\\u7A0B\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u5BA3\\u79F0\\u73BB\\u7483\\u6548\\u679C\\u7684 CSS \\u5B9E\\u73B0\\uFF0C\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u53EA\\u5E94\\u7528\\u5230\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"backdrop-filter: blur(30px);\"), \" \\u4E00\\u4E2A\\u5C5E\\u6027\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u80CC\\u666F\\u5982\\u679C\\u989C\\u8272\\u4E0D\\u592A\\u642D\\u914D\\uFF0C\\u4F1A\\u51FA\\u73B0\\u666E\\u9002\\u7684\\u6587\\u5B57\\u5BF9\\u6BD4\\u5EA6\\u3001\\u989C\\u8272\\u6548\\u679C\\u7B49\\u4E0D\\u534F\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E1A\\u52A1\\u4E2D\\u7528\\u5230\\u5F88\\u5C11\\u3002\"), mdx(\"p\", null, \"apple \\u5B98\\u7F51\\u7684\\u6548\\u679C\\u7528\\u5230\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"backdrop-filter: saturate(200%) blur(20px);\"), \" \\u52A0\\u4E0A\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-color\"), \" \\u53EF\\u4EE5\\u5B9E\\u73B0\\u6574\\u4F53\\u8272\\u8C03\\u548C\\u9971\\u548C\\u5EA6\\u8C03\\u6574\\uFF0C\\u6548\\u679C\\u597D\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1022px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"44.78764478764479%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAABYlAAAWJQFJUiTwAAAB8klEQVQoz2WSfU/aUBSH+f6fY8v+GnFGQVF0Zuh82zRMRQptkUJboEB7+wal8Oy0y0yWneSXe3vT+7vnOedUttstReSy5tuche+jmwM6XU1Wk/ufD7z2LSaLmNU6Y71el8qy7F3Ft2VZ2LZNxV8GeJaDb9oklkcyDVhOF8xnS2bOgk67h+s4hMonjmOiKGKz2bDb7fibTBHFWaGKqZvcnF7w+vWaya8+2USRTgISN0TZiv6TyXhsE4rZMggIwrDcp6tVaZqmKaGcFY8VqiTrDZE2ZHFwxXT/ilH1EvvogdFxm+7nH9ztX6PrOsbLC2+axsgwGEsphqaBN/dwXbc0DOQxpRSVKE5Rgj0bjJnrI4Kxhyf4njXF6Vp0HjuEgSKTi46Y2p1X3F6PsWEymc5YLJeSWfKOXknTNaOxw/nFNy5al2i6wffbO6p7XzhqnHBYq0kWNrn8HCSCJ4hx0RSpV57nJElSohboJfJqlaH3TVqtK2qHdT5++MRJo0nz9Ixm85xqdY/WzSNau43+/MSbZFeoLzIEv9vtlt113UmJXRoOBsPy4sFBjXr9uDS6vb3n+emFw3qDsweHWBrjiYmt9fCHQ2Kp18ybC7KPJ6tS4R/kWGoYRYkUNv5PSkWSvYEKfIoBSQQ1EsRU5nHHv1F0vBib36HImR86/PdmAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"iPad 页面的效果\",\n    \"title\": \"iPad 页面的效果\",\n    \"src\": \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png\",\n    \"srcSet\": [\"/static/f502c8e190f149e9045dfaa1d4d9c1ad/2c191/apple-cn-ipad.png 259w\", \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/86b01/apple-cn-ipad.png 518w\", \"/static/f502c8e190f149e9045dfaa1d4d9c1ad/26efe/apple-cn-ipad.png 1022w\"],\n    \"sizes\": \"(max-width: 1022px) 100vw, 1022px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"iPad \\u9875\\u9762\\u7684\\u6548\\u679C\"), \"\\n  \")), mdx(\"p\", null, \"\\u6211\\u8FD9\\u91CC\\u5B9E\\u73B0\\u7684\\u6574\\u4E2A\\u6548\\u679C\\u5E76\\u6CA1\\u6709\\u6309\\u7167\\u4E9A\\u514B\\u529B\\u5B98\\u65B9\\u7684\\u5404\\u4E2A\\u5C42\\u7EA7\\u6765\\u5B9E\\u73B0\\uFF0C\\u4E3B\\u8981\\u662F CSS \\u7684\\u6DF7\\u5408\\u6A21\\u5F0F mix-blend-mode \\u548C\\u60F3\\u8981\\u7684\\u6548\\u679C\\u5E76\\u4E0D\\u4E00\\u81F4\\uFF0C\\u6CA1\\u529E\\u6CD5\\u53E0\\u52A0\\u4E0A\\u53BB\\uFF0C\\u6240\\u4EE5\\u57FA\\u672C\\u4E0A\\u7528\\u7684\\u8FD8\\u662F backdrop-filter \\u5C5E\\u6027\\u3002\"), mdx(\"p\", null, \"\\u7528\\u5230\\u7684\\u5C5E\\u6027\\u6709:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: blur(30px);\"), \" \\u8D1F\\u8D23\\u80CC\\u666F\\u6A21\\u7CCA\\uFF0C\\u8FD9\\u4E2A\\u662F\\u6700\\u57FA\\u7840\\u7684\\u6548\\u679C\\uFF0C\\u5982\\u679C\\u4EC5\\u4F7F\\u7528\\u8FD9\\u4E2A\\u6548\\u679C\\u4E5F\\u53EF\\u4EE5\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u6CA1\\u529E\\u6CD5\\u4E2A\\u6027\\u5316\\u6548\\u679C\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: brightness(120%);\"), \" \\u8D1F\\u8D23\\u4EAE\\u5EA6\\uFF0C\\u5C06\\u6574\\u4E2A\\u6548\\u679C\\u53D8\\u4EAE\\u8FD8\\u662F\\u51CF\\u6697\\uFF0C\\u4E3B\\u8981\\u53EF\\u4EE5\\u7528\\u5728\\u6697\\u9ED1\\u8FD8\\u662F\\u4EAE\\u8272\\u4E3B\\u9898\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"background-color\"), \" \\u8D1F\\u8D23\\u6DFB\\u52A0\\u989C\\u8272\\u8272\\u8C03\\uFF0C\\u4E3B\\u8981\\u7684\\u4E2A\\u6027\\u5316\\u5C5E\\u6027\\uFF0C\\u9700\\u8981\\u914D\\u5408 opacity \\u907F\\u514D\\u5F71\\u54CD\\u540E\\u9762\\u7684\\u900F\\u660E\\u5EA6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"backdrop-filter: saturate(80%);\"), \" \\u8D1F\\u8D23\\u9971\\u548C\\u5EA6\\uFF0C\\u592A\\u9C9C\\u8273\\u7684\\u80CC\\u666F\\u8272\\u4F1A\\u5E72\\u6270\\u524D\\u666F\\u4FE1\\u606F\\uFF0C\\u8FD9\\u4E2A\\u53EF\\u4EE5\\u7A0D\\u5FAE\\u538B\\u4E00\\u4E0B\\u9971\\u548C\\u5EA6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"background-image\"), \" \\u8D1F\\u8D23\\u6DFB\\u52A0\\u4E00\\u4E2A\\u566A\\u70B9\\u5C42\\uFF0C\\u4E3B\\u8981\\u662F\\u63D0\\u4F9B\\u4E9A\\u514B\\u529B\\u78E8\\u7802\\u54D1\\u5149\\u7684\\u6548\\u679C\\u3002\")), mdx(\"p\", null, \"\\u76F8\\u6BD4 apple \\u7684\\u6548\\u679C\\u6DFB\\u52A0\\u4E86\\u4E00\\u4E2A brightness \\u6765\\u8C03\\u6574\\u80CC\\u666F\\u4EAE\\u5EA6\\uFF0C\\u4E0D\\u9700\\u8981\\u989C\\u8272\\u5C42\\u7684\\u6DF1\\u6D45\\u6765\\u627F\\u62C5\\u8FD9\\u4E2A\\u6548\\u679C\\u3002\\u7136\\u540E\\u989C\\u8272\\u5C42\\u66F4\\u591A\\u7684\\u662F\\u8FDB\\u884C\\u4E2A\\u6027\\u5316\\u7684\\u989C\\u8272\\u8C03\\u6574\\u3002\\u6700\\u540E\\u662F\\u6DFB\\u52A0\\u566A\\u70B9\\u5C42\\uFF0C\\u589E\\u52A0\\u78E8\\u7802\\u6548\\u679C\\uFF0C\\u8FD9\\u4E2A\\u6548\\u679C\\u53EF\\u80FD\\u6CA1\\u90A3\\u4E48\\u660E\\u663E\\uFF0C\\u4E0D\\u8FC7\\u4ED4\\u7EC6\\u770B\\u53EF\\u80FD\\u89C2\\u611F\\u8212\\u670D\\u4E00\\u70B9\\u70B9\\u3002\"), mdx(\"h3\", null, \"\\u7B80\\u5355\\u6765\\u8BF4\"), mdx(\"p\", null, \"backdrop \\u53EF\\u4EE5\\u540C\\u65F6\\u6DFB\\u52A0\\u591A\\u4E2A\\u6EE4\\u955C\\uFF0C\\u6240\\u4EE5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".acrylic {\\n  backdrop-filter: blur(30px) brightness(80%) saturate(160%);\\n  background-color: rgba(x, x, x, .5); /* \\u8FD9\\u91CC\\u5982\\u679C\\u6DFB\\u52A0\\u989C\\u8272\\u4E2A\\u6027\\u8BBE\\u7F6E\\uFF0C\\u9700\\u8981\\u6709\\u900F\\u660E\\u5EA6\\uFF0C\\u4E0D\\u7136\\u770B\\u4E0D\\u5230\\u540E\\u9762 */\\n  background-image: url(...); /* \\u566A\\u70B9\\u7684\\u56FE\\u7247 */\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u5C31\\u5B9E\\u73B0\\u4E86\\u5F88\\u7B80\\u5355\\u7684\\u4E00\\u4E2A\\u4E9A\\u514B\\u529B\\u6548\\u679C\\uFF0C\\u540C\\u65F6\\u4EAE\\u5EA6\\u548C\\u9971\\u548C\\u5EA6\\u7684\\u8C03\\u6574\\u80FD\\u591F\\u6EE1\\u8DB3\\u5927\\u90E8\\u5206\\u7684\\u524D\\u666F\\u5BF9\\u6BD4\\u5EA6\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6CE8\\u610F\\u4E8B\\u9879\"), mdx(\"p\", null, \"\\u4E9A\\u514B\\u529B\\u7684\\u6548\\u679C\\u9700\\u8981\\u80CC\\u666F\\u3001\\u4EAE\\u5EA6\\u3001\\u9971\\u548C\\u5EA6\\u7B49\\u5C5E\\u6027\\u914D\\u5408\\uFF0C\\u4E00\\u65E6\\u8FD9\\u51E0\\u4E2A\\u5C5E\\u6027\\u6CA1\\u642D\\u914D\\u597D\\uFF0C\\u8DDF\\u524D\\u666F\\u7684\\u5185\\u5BB9\\u5BF9\\u6BD4\\u5EA6\\u4E0D\\u9AD8\\uFF0C\\u5C31\\u4F1A\\u5BFC\\u81F4\\u53EF\\u8BFB\\u6027\\u95EE\\u9898\\u3002\\u6240\\u4EE5\\u8C03\\u6574\\u6548\\u679C\\u7684\\u65F6\\u5019\\u4E00\\u5B9A\\u8981\\u7CBE\\u5FC3\\u8C03\\u6574\\uFF0C\\u907F\\u514D\\u4E0D\\u900F\\u660E\\u5EA6\\u3001\\u989C\\u8272\\u3001\\u4EAE\\u5EA6\\u7B49\\u6DF7\\u5728\\u5230\\u524D\\u666F\\u5185\\u5BB9\\u4E2D\\uFF0C\\u9020\\u6210\\u8BC6\\u522B\\u56F0\\u96BE\\uFF0C\\u6548\\u679C\\u81EA\\u7136\\u6CA1\\u529E\\u6CD5\\u4FDD\\u8BC1\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0A\\u9762\\u7684 brightness \\u5982\\u679C\\u8C03\\u6574\\u5F88\\u9AD8\\uFF0C\\u52A0\\u4E0A\\u524D\\u666F\\u6587\\u5B57\\u5982\\u679C\\u662F\\u767D\\u8272\\uFF0C\\u90A3\\u4E48\\u6587\\u5B57\\u57FA\\u672C\\u4E0A\\u5C31\\u662F\\u6CA1\\u529E\\u6CD5\\u9605\\u8BFB\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u5B98\\u7F51\\u4E5F\\u91CD\\u70B9\\u5F3A\\u8C03\\uFF1A\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u8BF7\\u52A1\\u5FC5\\u786E\\u4FDD\\u5E94\\u7528\\u4E0A\\u663E\\u793A\\u7684\\u4EFB\\u4F55\\u6587\\u672C\\u6EE1\\u8DB3\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u6211\\u4EEC\\u5DF2\\u4F18\\u5316 Acrylic \\u8BBE\\u7F6E\\uFF0C\\u56E0\\u6B64\\uFF0C\\u589E\\u5F3A\\u8272\\u7684\\u9ED1\\u8272\\u3001\\u767D\\u8272\\u751A\\u81F3\\u4E2D\\u95F4\\u8272\\u7684\\u7070\\u8272\\u6587\\u672C\\u5728 Acrylic \\u4E0A\\u663E\\u793A\\u65F6\\u90FD\\u80FD\\u6EE1\\u8DB3\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u5E73\\u53F0\\u63D0\\u4F9B\\u7684\\u4E3B\\u9898\\u8D44\\u6E90\\u7684\\u9ED8\\u8BA4\\u5BF9\\u6BD4\\u8272\\u8C03\\u4E3A 80% \\u4E0D\\u900F\\u660E\\u5EA6\\u3002 \\u5728 Acrylic \\u4E0A\\u653E\\u7F6E\\u589E\\u5F3A\\u8272\\u6B63\\u6587\\u6587\\u672C\\u65F6\\uFF0C\\u4F60\\u53EF\\u4EE5\\u5728\\u964D\\u4F4E\\u8272\\u8C03\\u4E0D\\u900F\\u660E\\u5EA6\\u7684\\u540C\\u65F6\\u4FDD\\u6301\\u53EF\\u8BFB\\u6027\\u3002 \\u5728\\u6DF1\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0C\\u8272\\u8C03\\u4E0D\\u900F\\u660E\\u5EA6\\u53EF\\u8BBE\\u4E3A 70%\\uFF0C\\u800C\\u5728\\u6D45\\u8272\\u6A21\\u5F0F\\u4E0B\\uFF0CAcrylic \\u53EF\\u6EE1\\u8DB3 50% \\u4E0D\\u900F\\u660E\\u5EA6\\u6761\\u4EF6\\u4E0B\\u7684\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002\\n\\u4E0D\\u5EFA\\u8BAE\\u5728 Acrylic \\u56FE\\u9762\\u4E0A\\u653E\\u7F6E\\u989C\\u8272\\u9C9C\\u4EAE\\u7684\\u6587\\u672C\\uFF0C\\u56E0\\u4E3A\\u8FD9\\u79CD\\u7EC4\\u5408\\u53EF\\u80FD\\u65E0\\u6CD5\\u6EE1\\u8DB3 15 \\u50CF\\u7D20\\u5B57\\u4F53\\u5927\\u5C0F\\u65F6\\u7684\\u6700\\u4F4E\\u5BF9\\u6BD4\\u7387\\u8981\\u6C42\\u3002 \\u8BF7\\u5C3D\\u91CF\\u907F\\u514D\\u5728 Acrylic \\u5143\\u7D20\\u4E0A\\u653E\\u7F6E\\u8D85\\u94FE\\u63A5\\u3002 \\u6B64\\u5916\\uFF0C\\u5982\\u679C\\u9009\\u62E9\\u81EA\\u5B9A\\u4E49\\u8BBE\\u7F6E Acrylic \\u8272\\u8C03\\u989C\\u8272\\u6216\\u4E0D\\u900F\\u660E\\u5EA6\\uFF0C\\u800C\\u4E0D\\u91C7\\u7528\\u4E3B\\u9898\\u8D44\\u6E90\\u63D0\\u4F9B\\u7684\\u5E73\\u53F0\\u9ED8\\u8BA4\\u8BBE\\u7F6E\\uFF0C\\u8BF7\\u65F6\\u523B\\u6CE8\\u610F\\u53EF\\u8BFB\\u6027\\u3002\")), mdx(\"h3\", null, \"CSS \\u4F7F\\u7528\\u9650\\u5236\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7236\\u7EC4\\u4EF6\\u5982\\u679C\\u4F7F\\u7528 will-change: transform \\u5C5E\\u6027\\uFF0Cback-drop: blur \\u53EF\\u80FD\\u4E0D\\u4F1A\\u751F\\u6548\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"position: absolute; \\u7684\\u4E0A\\u5C42 mix-blend-mode \\u53EF\\u80FD\\u4F1A\\u628A\\u4E0B\\u5C42\\u7684 back-drop: blur \\u5C5E\\u6027\\u5931\\u6548\\u3002\")), mdx(\"h2\", null, \"\\u4E94\\u3001\\u6E90\\u7801\"), mdx(CodeWithPreview, {\n    codes: [{\n      name: 'index.css',\n      code: \".acrylic {\\n  /* size, position, etc... */\\n  position: relative;\\n  box-shadow: 0px 9px 20px #00000057;\\n  backdrop-filter: \\n      /* \\u8D1F\\u8D23\\u80CC\\u666F\\u6A21\\u7CCA */\\n      blur(30px)\\n      /* \\u8D1F\\u8D23\\u4EAE\\u5EA6\\uFF0C100 \\u4EE5\\u4E0B\\u4F1A\\u53D8\\u6697\\uFF0C\\u4EE5\\u4E0A\\u4F1A\\u63D0\\u4EAE */\\n      brightness(120%)\\n      /* \\u8D1F\\u8D23\\u989C\\u8272\\u9971\\u548C\\u5EA6\\uFF0C\\u53EF\\u4EE5\\u51CF\\u5C0F\\u6765\\u886C\\u6258\\u524D\\u666F\\uFF0C\\u907F\\u514D\\u80CC\\u666F\\u592A\\u9C9C\\u8273 */\\n      saturate(80%);\\n  /* \\u8D1F\\u8D23\\u989C\\u8272\\u53E0\\u52A0\\uFF0C\\u4E00\\u534A\\u767D\\u8272\\u3001\\u9ED1\\u8272\\u6216\\u4E3B\\u9898\\u8272\\uFF0C\\u886C\\u6258\\u524D\\u666F */\\n  background-color: #ffffff88;\\n  /* \\u8D1F\\u8D23\\u5728\\u6548\\u679C\\u4E0A\\u6DFB\\u52A0\\u566A\\u70B9\\uFF0C\\u53EF\\u4EE5\\u8425\\u9020\\u51FA\\u78E8\\u7802\\u6548\\u679C */\\n  background-image: url(data:image/png;base64,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);\\n  /* \\u78E8\\u7802\\u5927\\u5C0F */\\n  background-size: 50px;\\n}\"\n    }, {\n      name: 'index.html',\n      code: \"<div id=\\\"some-bg-div\\\">\\n  <div class=\\\"acrylic\\\">\\n    <!-- something -->\\n  </div>\\n</div>\"\n    }],\n    withTitle: true,\n    column: true,\n    preview: mdx(AcrylicEffect3, {\n      mdxType: \"AcrylicEffect3\"\n    }),\n    mdxType: \"CodeWithPreview\"\n  }), mdx(\"h2\", null, \"\\u516D\\u3001\\u4E9A\\u514B\\u529B\\u98CE\\u683C\\u7684\\u7EC4\\u4EF6\\u5E93(Acrylic UI Components Library)\"), mdx(\"p\", null, \"\\u518D\\u591A\\u4E00\\u70B9\\uFF0C\\u6BCF\\u7BC7\\u6587\\u7AE0\\u4E0D\\u4EC5\\u4EC5\\u5199\\u4E00\\u4E2A\\u4E1C\\u897F\\uFF0C\\u6700\\u540E\\u5982\\u679C\\u591A\\u82B1\\u4E00\\u4E9B\\u65F6\\u95F4\\u63D0\\u70BC\\u51FA\\u70B9\\u4EC0\\u4E48\\u3001\\u4EA7\\u51FA\\u4EC0\\u4E48\\uFF0C\\u90A3\\u4E48\\u6587\\u7AE0\\u4E0D\\u4EC5\\u4EC5\\u662F\\u603B\\u7ED3\\uFF0C\\u66F4\\u662F\\u80FD\\u4EA7\\u751F\\u6301\\u7EED\\u7684\\u4EF7\\u503C\\u3002\\u8FD9\\u91CC\\u5C06\\u8FD9\\u4E2A\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u4E3A\\u4E3B\\u9898\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7EC4\\u4EF6\\u5E93\\u3002\"), mdx(\"p\", null, \"\\u7EC4\\u4EF6\\u5E93\\u7684\\u5B9E\\u73B0\\u662F\\u5F88\\u590D\\u6742\\u7684\\uFF0C\\u4E00\\u822C\\u662F\\u56E2\\u961F\\u6C89\\u6DC0\\uFF0C\\u7EF4\\u62A4\\u66F4\\u662F\\u8017\\u65F6\\u8017\\u529B\\uFF0C\\u6539\\u8FDB\\u548C\\u6DFB\\u52A0\\u7EC4\\u4EF6\\u66F4\\u662F\\u6D77\\u91CF\\u5DE5\\u4F5C\\uFF0C\\u4F46\\u662F\\u8FD8\\u6709\\u4E00\\u4E2A\\u6BD4\\u8F83\\u8F7B\\u91CF\\u7701\\u4E8B\\u7684\\u9014\\u5F84\\uFF1A\\u505A\\u4E3B\\u9898\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u6BD4\\u8F83\\u77E5\\u540D\\u7684 @material-ui \\u5C31\\u5305\\u542B\\u4E86\\u5F88\\u591A\\u975E\\u5E38\\u9AD8\\u8D28\\u91CF\\u7684\\u7EC4\\u4EF6\\uFF0C\\u975E\\u5E38\\u53CB\\u597D\\u3001Tree-Shaking\\u3001\\u56FE\\u6807\\u3001\\u4EA4\\u4E92\\u4F53\\u9A8C\\u3001\\u5B8C\\u6574\\u7684\\u8BBE\\u8BA1\\u89C4\\u8303\\u3001\\u5B8C\\u5584\\u7684 TypeScript \\u7684\\u652F\\u6301\\u3001\\u751A\\u81F3\\u5305\\u542B\\u65E0\\u969C\\u788D\\u7684\\u652F\\u6301\\uFF0C\\u66F4\\u91CD\\u8981\\u7684\\u662F\\u652F\\u6301\\u4E3B\\u9898\\u3002\\u8FD9\\u91CC\\u6211\\u4EEC\\u5728\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u57FA\\u7840\\u4E0A\\u505A\\u4E00\\u4E2A\\u4E3B\\u9898\\u6548\\u679C\\u3002\"), mdx(\"p\", null, \"\\u70B9\\u8FDB\\u53BB\\u67E5\\u770B\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/fluent-acrylic\"\n  }, \"\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u7684\\u7EC4\\u4EF6\\u5E93\"), \"\\uFF0C\\u5305\\u542B\\u6309\\u94AE\\u3001\\u5F39\\u7A97\\u3001\\u83DC\\u5355\\u3001\\u8B66\\u793A\\u6761\\u3001\\u5BF9\\u8BDD\\u6846\\u7B49\\u4E9A\\u514B\\u529B\\u6548\\u679C\\u7EC4\\u4EF6\\u3002\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Menu\"), \" \\u7684\\u4F8B\\u5B50:\"), mdx(\"div\", {\n    style: {\n      width: '100%',\n      height: 200,\n      overflow: 'hidden',\n      display: 'flex'\n    }\n  }, mdx(AcrylicDemo5, {\n    mdxType: \"AcrylicDemo5\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/marry/marry.md","id":"efef442d-0f5c-556e-a942-17e00d70eb08","parent":{"name":"marry","sourceInstanceName":"blog"},"excerpt":"…","fields":{"title":"💒 结婚撸个相册 🎈🎉💖💗💕💘","slug":"/blog/marry","description":"看到自己的爱人穿上婚纱的样子，心里藏不住的开心","date":"2020-07-10","redirects":null,"datetime":"2020-07-10 20:08:10","categories":["think"],"series":null,"tags":["美好"],"status":"online"},"frontmatter":{"published":null,"tags":["美好"],"theme":null,"slug":"marry","date":"2020-07-10 20:08:10"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"marry\",\n  \"title\": \"💒 结婚撸个相册 🎈🎉💖💗💕💘\",\n  \"date\": \"2020-07-10 20:08:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"看到自己的爱人穿上婚纱的样子，心里藏不住的开心\",\n  \"categories\": [\"think\"],\n  \"tags\": [\"美好\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst NoShare = makeShortcode(\"NoShare\");\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst Device = makeShortcode(\"Device\");\nconst SourceCodeLink = makeShortcode(\"SourceCodeLink\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(NoShare, {\n    mdxType: \"NoShare\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u7B2C\\u4E00\\u773C\\u770B\\u5230\\u5979\\u7A7F\\u5A5A\\u7EB1\\u7684\\u6837\\u5B50\\u7684\\u65F6\\u5019\\uFF0C\\u8BF4\\u4E0D\\u51FA\\u6765\\u7684\\u60CA\\u5947\\uFF0C\\u771F\\u7684\\u592A\\u7F8E\\u597D\\u4E86\\uFF0C\\u5FC3\\u91CC\\u7830\\u7830\\u67D4\\u8F6F\\u7684\\u611F\\u89C9\\uFF0C\\u5174\\u594B\\u53C8\\u6FC0\\u52A8\\u7684\\u60C5\\u7EEA\\uFF0C\\u60F3\\u4E0D\\u8D77\\u6765\\u53BB\\u62CD\\u7167\\uFF0C\\u53EA\\u60F3\\u76EF\\u7740\\u5979\\u7684\\u6837\\u5B50\\u523B\\u5728\\u8111\\u6D77\\u91CC\\u3002\\u5979\\u6F02\\u4EAE\\u597D\\u770B\\u7684\\u65F6\\u5019\\u5F88\\u591A\\uFF0C\\u6BCF\\u6B21\\u6211\\u90FD\\u80FD\\u627E\\u5230\\u8BCD\\u5F62\\u5BB9\\uFF0C\\u4F46\\u662F\\u6B64\\u65F6\\u6B64\\u523B\\u5FC3\\u91CC\\u90A3\\u4E48\\u591A\\u60C5\\u7EEA\\uFF0C\\u5374\\u6CA1\\u529E\\u6CD5\\u8868\\u8FBE\\u51FA\\u6765\\uFF0C\\u53EA\\u662F\\u7275\\u8D77\\u4E86\\u5979\\u7684\\u624B\\uFF0C\\u7EA2\\u4E86\\u773C\\u7736\\u3002\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u6700\\u7EC8\\u6548\\u679C\\u53EF\\u4EE5\\u5230\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/studio/marry\"\n  }, \"\\u9884\\u89C8\\u9875\\u9762\")), mdx(\"h2\", null, \"\\u3007\\u3001\\u76EE\\u7684\"), mdx(\"p\", null, \"\\u521A\\u6536\\u5230\\u7ED3\\u5A5A\\u7167\\u7684\\u65F6\\u5019\\u5C31\\u611F\\u89C9\\u592A\\u6F02\\u4EAE\\u4E86\\uFF0C\\u5C24\\u5176\\u662F\\u7231\\u4EBA\\u7A7F\\u4E0A\\u5A5A\\u7EB1\\u975E\\u5E38\\u597D\\u770B\\u7684\\u6837\\u5B50\\uFF0C\\u7B2C\\u4E00\\u65F6\\u95F4\\u5206\\u4EAB\\u7ED9\\u5BB6\\u4EBA\\uFF0C\\u4F46\\u662F\\u9AD8\\u6E05\\u56FE\\u51E0\\u5341\\u5146\\uFF0C\\u5FAE\\u4FE1\\u4E00\\u4E2A\\u4E2A\\u53D1\\u771F\\u7684\\u592A\\u5357\\u4E86\\uFF0C\\u653E\\u5230\\u7F51\\u76D8\\u4EC0\\u4E48\\u7684\\u5F88\\u4E0D\\u653E\\u5FC3\\uFF0C\\u5A5A\\u793C\\u7EAA\\u4E4B\\u7C7B\\u7684\\u6CA1\\u6709\\u76F8\\u518C\\u529F\\u80FD\\uFF0C\\u4E8E\\u662F\\u60F3\\u505A\\u4E00\\u4E2A\\u5728\\u7EBF\\u76F8\\u518C\\uFF0C\\u5305\\u62EC\\u7535\\u5B50\\u8BF7\\u67EC\\u3001\\u52A0\\u4E0A\\u795D\\u798F\\u5899\\u611F\\u89C9\\u4F1A\\u5F88\\u4E0D\\u9519\\uFF0C\\u8001\\u672C\\u884C\\u80FD\\u7528\\u4E0A\\u4E86\\u3002\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(Device, {\n    mdxType: \"Device\"\n  }, mdx(\"video\", {\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/marry.mp4\",\n    type: \"video/mp4\"\n  }))))), mdx(\"h2\", null, \"\\u4E00\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u7535\\u5B50\\u8BF7\\u67EC\\u8BF4\\u767D\\u4E86\\u5C31\\u662F\\u5E7B\\u706F\\u7247\\u561B\\uFF0C\\u4E5F\\u5C31\\u662F\\u9875\\u9762\\u5207\\u6362\\u52A0\\u4E0A\\u5143\\u7D20\\u52A8\\u753B\\uFF0C\\u5177\\u4F53\\u5B9E\\u73B0\\u4E0A\\uFF0C\\u76D1\\u542C\\u6ED1\\u52A8\\u7684\\u4E8B\\u4EF6\\uFF0C\\u6839\\u636E\\u6ED1\\u52A8\\u8DDD\\u79BB\\u6765\\u5904\\u7406\\u7FFB\\u9875\\u7684\\u4E8B\\u60C5\\uFF0C\\u6211\\u8FD9\\u8FB9\\u56FE\\u5FEB\\u627E\\u4E86\\u4E00\\u4E2A\\u7FFB\\u9875\\u7684\\u5E93\\uFF0C\\u76F4\\u7528\\u4E86\\u8FDB\\u6765\\u3002\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/lipten/slidePage\",\n    name: \"slidePage\",\n    desc: \"\\u7B80\\u5355\\u3001\\u8DE8\\u5E73\\u53F0\\u3001\\u65E0\\u4F9D\\u8D56\\u7684\\u5168\\u5C4F\\u6EDA\\u52A8H5\\u63D2\\u4EF6\\uFF0C\\u53EF\\u5B9E\\u73B0\\u5185\\u5BB9\\u8D85\\u51FA\\u5C4F\\u5E55\\u6EDA\\u52A8\\u3001\\u52A8\\u6001\\u66F4\\u65B0\\u7B49\\u7279\\u8272\\u529F\\u80FD\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u53EF\\u60DC\\u4E0D\\u662F TypeScript \\u7684\\uFF0C\\u4E0D\\u8FC7\\u591F\\u7528\\u4E86\\uFF0C\\u800C\\u4E14 2.4k after gzipped\\u3002\"), mdx(\"p\", null, \"\\u518D\\u5F15\\u5165 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\"\n  }, \"https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css\")), mdx(\"p\", null, \"\\u76F8\\u5F53\\u4E8E\\u5185\\u7F6E\\u4E03\\u5341\\u591A\\u79CD\\u52A8\\u753B\\u6548\\u679C\\u5B9E\\u73B0\\u5143\\u7D20\\u8FDB\\u5165\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u7B80\\u5355\\u5C55\\u793A\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(Device, {\n    mdxType: \"Device\"\n  }, mdx(\"video\", {\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    style: {\n      width: '100%'\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/marry-slider.mp4\",\n    type: \"video/mp4\"\n  }))))), mdx(\"p\", null, \"\\u6700\\u540E\\u7B80\\u5355\\u5C01\\u88C5\\u4E00\\u4E2A AniBlock: \\u7B80\\u5355\\u7528\\u53C2\\u6570\\u63A7\\u5236\\u4E00\\u5F20\\u56FE\\u7247\\u7684\\u8FDB\\u573A\\uFF0C\\u7136\\u540E\\u5C31\\u80FD\\u62FC\\u51FA\\u6765\\u5168\\u90E8\\u7684\\u52A8\\u753B\\u6548\\u679C\\u4E86\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"<AniBlock\\n  effect=\\\"rotateInDownRight\\\"\\n  width={66.5}\\n  height={56}\\n  left={14.5}\\n  top={208.5}\\n  delay={800}\\n>\\n  <img src=\\\"images/flower-1.png\\\" />\\n</AniBlock>\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u7684\\u52A8\\u753B\\u8BBE\\u7F6E\\u53EF\\u4EE5\\u5C06\\u4F4D\\u7F6E\\u3001\\u65F6\\u95F4\\u3001\\u5EF6\\u8FDF\\u4F5C\\u4E3A\\u53EF\\u89C6\\u5316\\u7684\\u4E00\\u4E2A\\u53D8\\u91CF\\uFF0C\\u7136\\u540E\\u505A\\u4E00\\u4E2A\\u53EF\\u89C6\\u5316\\u7684\\u52A8\\u753B\\u7F16\\u8F91\\u5668\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u5F53\\u7136\\u5E7B\\u706F\\u7247\\u90E8\\u5206\\u4E5F\\u53EF\\u4EE5\\u81EA\\u5DF1\\u5B9E\\u73B0\\uFF0C\\u6ED1\\u52A8\\u7684\\u8FC7\\u7A0B\\u4E2D\\u7528 touchstart\\u3001touchmove\\u3001touchend\\u3001transitionend \\u4E8B\\u4EF6\\u6765\\u63A7\\u5236\\u4F4D\\u7F6E\\u548C\\u52A8\\u753B\\uFF0Ctransform translate3d \\u6837\\u5F0F\\u5C5E\\u6027\\u6765\\u63A7\\u5236\\u79FB\\u52A8\\u5B9E\\u73B0\\u5E7B\\u706F\\u7247\\u7684\\u90E8\\u5206\\u3002\")), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u7535\\u5B50\\u76F8\\u518C\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u662F\\u505A\\u7684\\u4E3B\\u8981\\u76EE\\u7684\\uFF0C\\u4E5F\\u662F\\u6700\\u7B80\\u5355\\u7684\\uFF0C\\u9700\\u6C42\\u5C31\\u662F\\u628A\\u4E00\\u4E24\\u767E\\u5F20\\u9AD8\\u6E05\\u7167\\u7247\\u653E\\u5230\\u7F51\\u9875\\u4E2D\\uFF0C\\u70B9\\u51FB\\u53EF\\u4EE5\\u67E5\\u770B\\u9AD8\\u6E05\\u56FE\\uFF0C\\u53EF\\u4EE5\\u653E\\u5927\\u62D6\\u52A8\\u67E5\\u770B\\u3002\"), mdx(\"h3\", null, \"2.1 \\u9884\\u89C8 + \\u9AD8\\u6E05\\u56FE\\u7247\\u5904\\u7406\\u548C\\u538B\\u7F29\"), mdx(\"p\", null, \"\\u539F\\u56FE\\u51E0\\u5341\\u5146\\u7684\\u5927\\u5C0F\\u5728\\u7F51\\u4E0A\\u4F20\\u8F93\\u4E0D\\u592A\\u73B0\\u5B9E\\uFF0C\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u5DF2\\u7ECF\\u8DB3\\u591F\\u6E05\\u6670\\u4E86\\uFF0C\\u6240\\u4EE5\\u672C\\u5730\\u538B\\u7F29\\u4E86 60% \\u624D\\u4E0A\\u4F20\\u5230\\u817E\\u8BAF\\u4E91\\u5B58\\u50A8 COS \\u4E0A\\u7684\\uFF0C\\u5E73\\u5747\\u5927\\u5C0F 1-5 \\u5146\\u4E5F\\u591F\\u4E00\\u822C\\u4EBA\\u7684\\u52A0\\u8F7D\\u7B49\\u5F85\\u65F6\\u95F4\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u4E00\\u65B9\\u9762\\u662F\\u9884\\u89C8\\u56FE\\u538B\\u7F29\\u8D28\\u91CF\\uFF0C\\u5982\\u679C\\u9884\\u89C8\\u56FE\\u4E5F\\u76F4\\u63A5\\u653E\\u539F\\u56FE\\u7684\\u8BDD\\uFF0C\\u5373\\u4F7F\\u52A0\\u4E0A\\u61D2\\u52A0\\u8F7D\\uFF0C\\u4E00\\u4E0B\\u5341\\u51E0\\u5146\\u7684\\u5927\\u5C0F\\u4E5F\\u4E0D\\u73B0\\u5B9E\\uFF0C\\u6240\\u4EE5\\u9884\\u89C8\\u56FE\\u9700\\u8981\\u5355\\u72EC\\u5904\\u7406\\uFF0C\\u597D\\u5728 COS \\u7684\\u8D44\\u6E90\\u652F\\u6301\\u514D\\u8D39\\u5904\\u7406\\uFF0C\\u53EF\\u4EE5\\u6309\\u7167\\u8D28\\u91CF\\u548C\\u5927\\u5C0F\\u6765\\u8F93\\u51FA\\u56FE\\u7247\\uFF0C\\u80FD\\u8FBE\\u5230 1M \\u4EE5\\u5185\\uFF0C\\u751A\\u81F3 100-200KB \\u7684\\u56FE\\u7247\\uFF0C\\u52A0\\u4E0A CDN \\u7F13\\u5B58\\uFF0C\\u901F\\u5EA6\\u4E5F\\u5B8C\\u5168\\u80FD\\u591F\\u63A5\\u53D7\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"781px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"102.7027027027027%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsSAAALEgHS3X78AAACuUlEQVQ4y62USU9UQRDH3xczkUjUE1GiiSjbEC8uBxcC+gn8MAZFjQmCnLgKjKMDmURImIV58/Z9nyn7X8x7PLY50ckv1Wt1VXVVS57nUbVapVqtRo1Gg/r9PqENBoMLlOevalKWZWRZFtm2TUEQjNxcVnqlwjAMqV6v08HBwYXDObC6bPmoJkVRRLIsU6/XYzRNo25XZqlpuphTeN51XVaWZf3igsuQkiQhx7EpDH26jiYpikbfvm/Qz80t2q3uUfX3PoP+jmB3yM7uaLZ36rS3/4+k2p8GTc8vUeXpe5qaeUszlSWaW3jHEsxWlml2YZkeTr2iew9e0P2HLy9lYvI5vV78QNKv7b90c3yGbt2Zp/G7FQZ9HMYFj6bfsJyYfEZjt+d47Tw4c2PsCT2eXRQuqzp9+bpJq4KVz+sFn1bBRon1M+vn935cWaO1H1t45ZCOj9ukqr3reRTf96nZbHKqWJZdpEWapoLsnCyTlTgZo0ikRAzaHZk8PyI/iBnNsChKstHEpzIWMoxTRur3B2IyoUxIECcp6YbJWLbD0jCtYi7Htl2eh9R1UxgUUCq8k5D9KD98ElmWcjWoqkqqorDU0BegWlDrqCy4iL0nMiMUR16aUl6r2XAC/W63Kx7qmKUiFHc6HWq12qwUn8ioz4MVIo5JkvJNCK5pmlzLkLAOErVsDMdYww+l6zqvAUOEARYXLoMgCFmxLWKHTbphiI0GK8JhfBYYo48L4jjmMOBsJPr8OeQKfRFUpBCshDJFUVmBOowhFMF9We6xxDi3znEc1oEHZoVn8k0E2RTu5C7rw4OO47ISKIeFAG6X/8d+HkOYHQjrYCESG5sPDw+peXRUWKjrGrXbbe63Wi3+kDHG4+HCmF0enL5ygRgjNRAjRxBFJ3FyRVq5rsdrnuezxTAA7toChAyZ8h86zwDOhEa1yQAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"COS 图片处理\",\n    \"title\": \"COS 图片处理\",\n    \"src\": \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png\",\n    \"srcSet\": [\"/static/667781477a440f03e61263c6bef6b902/2c191/cos-image-compress.png 259w\", \"/static/667781477a440f03e61263c6bef6b902/86b01/cos-image-compress.png 518w\", \"/static/667781477a440f03e61263c6bef6b902/4e427/cos-image-compress.png 781w\"],\n    \"sizes\": \"(max-width: 781px) 100vw, 781px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"COS \\u56FE\\u7247\\u5904\\u7406\"), \"\\n  \")), mdx(\"h3\", null, \"2.2 \\u56FE\\u7247\\u5217\\u8868\\u7684 Gallery\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u80FD\\u591F\\u5B9E\\u73B0\\u7011\\u5E03\\u6D41\\u7684\\u5E03\\u5C40\\u5F62\\u5F0F\\uFF1A\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/neptunian/react-photo-gallery\",\n    name: \"react-photo-gallery\",\n    desc: \"React Photo Gallery\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"451px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"110.8108108108108%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAWABQDASIAAhEBAxEB/8QAGQABAAIDAAAAAAAAAAAAAAAAAAIDAQQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAgH/2gAMAwEAAhADEAAAAdXMom0pqVBF0Aj/AP/EABwQAAICAgMAAAAAAAAAAAAAAAABAgMRExIhQf/aAAgBAQABBQKBtczZIhhFWEcSrEn6qev/xAAWEQEBAQAAAAAAAAAAAAAAAAAAERD/2gAIAQMBAT8BTK//xAAWEQADAAAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8BcP/EAB4QAAIBAwUAAAAAAAAAAAAAAAABIQIRMRAiMoGh/9oACAEBAAY/AoSLNnJkWXZNXhkxotx//8QAHRAAAgICAwEAAAAAAAAAAAAAAREAITFBUWFxgf/aAAgBAQABPyFgwRVqHOSwFONHs0pumhHNQ+oQZW0cUGJpeTCk1qn/2gAMAwEAAgADAAAAEJz4Q//EABgRAAMBAQAAAAAAAAAAAAAAAAABESFR/9oACAEDAQE/EHCuj2FH/8QAGBEAAwEBAAAAAAAAAAAAAAAAAAERIWH/2gAIAQIBAT8QVLwWWEn/xAAdEAEAAwEBAAMBAAAAAAAAAAABABEhMUFRYYHB/9oACAEBAAE/EHSAjR+95KXLroaDTh8Q8fbDEBOXOt/x5C8EMa11zZ1wKeVKJy8HrGwrlmhcT13pE/s//9k=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"竖向相册\",\n    \"title\": \"竖向相册\",\n    \"src\": \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg\",\n    \"srcSet\": [\"/static/95a02834beebecae8a4aad26eaa2fcb0/fca29/gallery.jpg 259w\", \"/static/95a02834beebecae8a4aad26eaa2fcb0/0b45f/gallery.jpg 451w\"],\n    \"sizes\": \"(max-width: 451px) 100vw, 451px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7AD6\\u5411\\u76F8\\u518C\"), \"\\n  \")), mdx(\"p\", null, \"\\u518D\\u6839\\u636E\\u6EDA\\u52A8\\u6761\\u4F4D\\u7F6E\\uFF0C\\u5B9E\\u73B0\\u4E00\\u4E2A\\u61D2\\u52A0\\u8F7D\\u7684\\u903B\\u8F91\\u5373\\u53EF\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"useEffect(() => {\\n  const handleScroll = (e: MouseEvent) => {\\n    let scrollY = wrapBoxEl.current.scrollTop\\n    if (\\n      wrapBoxEl.current.offsetHeight + scrollY >=\\n      wrapBoxEl.current.scrollHeight - 50\\n    ) {\\n      loadMorePhotos()\\n    }\\n  }\\n\\n  wrapBoxEl.current.addEventListener(\\\"scroll\\\", handleScroll)\\n  return () => wrapBoxEl.current.removeEventListener(\\\"scroll\\\", handleScroll)\\n})\\n\")), mdx(\"h3\", null, \"2.3 \\u70B9\\u51FB\\u653E\\u5927\\u7684 LightBox\"), mdx(\"p\", null, \"gallery \\u81EA\\u5E26\\u4E00\\u4E2A LightBox \\u7EC4\\u4EF6\\uFF0C\\u4F46\\u662F\\u4E0D\\u80FD\\u653E\\u5927\\u62D6\\u52A8\\uFF0C\\u800C\\u4E14\\u56FE\\u7247\\u6570\\u91CF\\u591A\\u4E86\\u4F1A\\u51FA\\u73B0\\u5361\\u987F\\u6027\\u80FD\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u81EA\\u5DF1\\u5355\\u72EC\\u53C8\\u627E\\u5230\\u4E86\\u4E00\\u4E2A\\u70B9\\u51FB\\u653E\\u5927\\u7684\\u7EC4\\u4EF6\\uFF0C\\u63A5\\u5230\\u4E86\\u70B9\\u51FB\\u4E8B\\u4EF6\\u4E0A\\uFF0C\\u53EF\\u4EE5\\u505A\\u5230\\u5355\\u673A\\u653E\\u5927\\u548C\\u62D6\\u52A8\\u67E5\\u770B\\u7684\\u529F\\u80FD\\u3002\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/tim-soft/react-spring-lightbox\",\n    name: \"react-spring-lightbox\",\n    desc: \"\\uD83D\\uDCF7  A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u4F46\\u662F\\u52A0\\u4E0A\\u591A\\u5F20\\u56FE\\u7247\\u4E4B\\u540E\\uFF0C\\u4E00\\u65B9\\u9762\\u662F\\u61D2\\u52A0\\u8F7D\\u95EE\\u9898\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u4E00\\u767E\\u591A\\u5F20\\u56FE\\u7247\\u7684\\u52A8\\u753B\\u7740\\u5B9E\\u5361\\u987F\\uFF0C\\u6240\\u4EE5\\u6700\\u540E\\u53BB\\u9664\\u4E86\\u591A\\u56FE\\u7247\\u6ED1\\u52A8\\u5207\\u6362\\u7684\\u529F\\u80FD\\uFF0C\\u4EC5\\u80FD\\u67E5\\u770B\\u70B9\\u51FB\\u56FE\\u7247\\uFF0C\\u6548\\u679C\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u795D\\u798F\\u5899\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u529F\\u80FD\\u539F\\u672C\\u662F\\u6253\\u7B97\\u4F7F\\u7528\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u6216\\u8005\\u5F00\\u653E\\u5E73\\u53F0\\uFF0C\\u83B7\\u53D6\\u7528\\u6237\\u7684\\u5934\\u50CF\\u548C\\u6635\\u79F0\\uFF0C\\u53D1\\u8868\\u8BC4\\u8BBA\\uFF0C\\u6700\\u597D\\u518D\\u52A0\\u4E0A\\u6253\\u8D4F\\u7684\\u529F\\u80FD\\u3002\\u60F3\\u8C61\\u5F88\\u7F8E\\u597D\\uFF0C\\u663E\\u793A\\u5F88\\u6253\\u8138\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5B9E\\u73B0\\u7684\\u6548\\u679C\\u5C31\\u53EA\\u6709\\u4E00\\u4E2A\\u5F39\\u5E55\\u5899\\uFF0C\\u53EF\\u4EE5\\u8BC4\\u8BBA\\uFF0C\\u6253\\u8D4F\\u529F\\u80FD\\u53D8\\u6210\\u4E86\\u6253\\u8D4F\\u4E8C\\u7EF4\\u7801\\u3002\"), mdx(\"p\", null, \"\\u5F39\\u5E55\\u529F\\u80FD\\u4F7F\\u7528\\u7684\\u662F\\uFF1A\"), mdx(SourceCodeLink, {\n    url: \"https://github.com/zerosoul/rc-bullets\",\n    name: \"rc-bullets\",\n    desc: \"\\uD83C\\uDF08 \\u57FA\\u4E8ECSS3 Animation\\uFF0C\\u4F7F\\u7528React\\u6784\\u5EFA\\u7684\\u5F39\\u5E55\\u7EC4\\u4EF6\",\n    mdxType: \"SourceCodeLink\"\n  }), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u7EC4\\u4EF6\\u7A0D\\u5FAE\\u4FEE\\u6539\\u4E86\\u4E00\\u4E9B\\uFF0C\\u66F4\\u7B26\\u5408\\u6574\\u4E2A\\u76F8\\u518C\\u7684\\u98CE\\u683C\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"441px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"201.15830115830119%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAYAAAD+MdrbAAAACXBIWXMAAAsSAAALEgHS3X78AAAJP0lEQVRIx42XCVBV1xnHLzuPTRGEhwjygPd4Dx677Ot7vPdkExCjiEbRKIkrm4C4oRiXWhdiXBKNZlFxiVtcatKpWdrORGNSTNUxmqTtdFI7bSfONJMmrYn21+9eYsckdqZ35j/nnO+c+z//c853z/ddJSEhgZKSEiorK6moqKC8vByXy4XT6cThcHyHMsrKyh5qD0G1PbAXFBRgNBpRiouLNUNKSgpWqxWLxYLJZCIuLo5YQyyxsbFaXWtL3WAwPBIqYW5uLoqqKCMzk8ysLNIyMkhJTSVJiM1mCwkms0yQqNlSUlK1yYwymcmU8D2oylQRdrt9iDDZbMZqMmIWBcYx0cRGRmKMNQipCXOC2BPiv4PxofIhyDijMX6IsFL2zTnjCeoW91C9qIPq1k6qFrWTlFVCuN7EqKgkIqKs6KOSCR8t9dFWQRL6URaBWZBA+CgT0WOMsp9CWDt+PNXP7WXGex8y7Z13efL3f6PjLtif3oeiJKEMK0EJLMRtWBHuw4rxCMzF3T8LN106bj5W3HwTUTxjCQkzykGWoagnO2luJ/PX7qS5t5/mVf3M3/AclRVzSIt1MdZax/DICjxGlOETYsNzeD7eQTl4+afj4ZuMl18KireFkeEJOB2iUHWRVfYqBiY0sdsxgf2PNfFK/XQOTJ7FtpJadmSV4UypRQmQwUHFUuah6LLxCsjG3S8Nz8A03H3ShNAypLCmtpZxaU4a8xqYmDWRhoIpTM4X5E5miauBvoqpVOdNIdVaT0bieDKtVVgSKvAeUYyPqPUKyhTysYQKYV3teJS62jp8I2wo+hqUUbV4RjWgjJyEo+BxPp0wg8HHp3C9bQ6/W9nBLSk/rHfwmwkOcpInilqH7G0him8Ow0It1NfXoVRVVRIQPQ6fMVPxGzMNP0MTHrHNWAqWsLa+k/UNnaybvpR1M5fTN6WLrZPn8eK8xRRWdGPIa8GcOwdjVhPxicVUlDtRqquq8IudgE9SC77mp/BJ68KrbKds7iHZj5Mo408LzojDnpDPah+LXr7Jurf+wctnL/D8q6fZe+Icb3xwg7Zlq8nOGituU1ODLrYeXX4f/qXr8a15iVHTDqN/4jT6WefQN54k7LHjhFUNEGLfw5y151l7cJAVu86zfMcZlmw5woa9rzO5aQEF+fLpVVZWoIsZjy67F6XhVao7BtjWvod3FrRwrXcpVzes48rypVzbuJErfWu4NG0Kp6Y9QXDxVtwzNsrKVuAW10JITDHOMvFZ9SYJMNTgY+1BmXgc56Yz7Oj8CQPzOjjRvZITS9dwvGMpJ5eu5tiiJZxqaqa/qQdf5z7c87bjm/40HuYeRsY5hbB4iDAooRElv5+qmo0cbVzF9rk9bFvYy+7WPo629zIgONSzlgOdT7O3qZXnZneT3nQYZWw/3hkb8LCuJdRUidNepBLaGWZ5HM+6I1TM3M3z41vkVJexcX4f2+b0cKC5hT3Tn+Jg12qOdizj4OwWDrb2UtRyDt/yAYJLtqOkbiTEXCeE4kJldhsBKTPxn32OgK7L6HreJ7DnMiM2fUzIkrPyPcdQWzeb1/YeYv3mbWzac5AtJ9+lVw5iydaDPHP4Lda8Mkh4Yi0Om0poK8U/uQm/BT/Hf9UgutUfoVt1naCtnzHssU1CGM2Mpc/w68Eb7D58nBfETV6+MMj2U2+x+fDrDLz5Pjt+9gnh4uhDhKLQz9yI/9yzjNh2g/AXbhKw7Q/4d74pH346XsoYQhbuQn/sT4SmTCJ4RDLBTcdIXXyJvtYTrG4/z8r2X1HlXEBRkbiNeinqYmpwazyEz5YbBL5wC999f8WrRRzaL1muJgPuceX4NMt1FmhF8YlDmXkAy5rrrH9ygPVtb7Jnw6dMre0mvzB7SKFvdDX1jsWsmt5L14wtdE3vp6tqGYtN4+i0lEvpYHFMKR2xNoGdnvoVLJm2mdWulawtWsxPc9upt7ootMkpl4rC4JhxHLI6OZ9q51TBXN6o6+SsfR6nMiYLJvFaZgPHE2t4VVzjmHkCpwue4nR+My8Fu9jjV8KARyEzQ5LJd8olYxPCoCgbu9Jn8EbxXC40ruRCw3JeL2/hFa809nsP4YBPOgPeqRwJc3E0so4jI8s5HlHJ6UgnF8KdzIvKILesVPxQCL0j7ViSp1OdOYsq1wrq5r5ITUUnruB0XOHZuMIysYemkRucQmFoNjZ7Nzk1m2md0stvu5ZzqW0ZC53l5BYXqXtox08UKrFTUOLkLkxpRpl1VJy1SVwmDMVrjJR6/IKMVJlzcCTk4ShswD6hm8zyhWSPm0lBaYOE2hxs4oIaodtoqYQ78AnOxFdfjF/KVHzDsvHwiMLb1yCEETiNOVwqsXF6ejNn5rezv6CMFbku8QQzinscw0IMuNQQYJdUojhyLCWREnwCEyWiJcr1no1n2FjcvKJw84gUlQb8A+JJjkwlIyqTjOixZBnyiEmw4RVilfcshEko1YKUeij9o3I4Y3ARFZGlzeglA7xHpuKpM+DhHomnv6jwlqW7jxbECKTuFo3in4bXCAmnMm6kPk4INYV2CsKSyA/PkCgmy/OVwT7RWt3NS15SRkk7XlRG4+YZhbuU7qLc3VPaXvES9TKEPIoRodES9Ryyh7Jk90BZVoCBwNBEQRJ+wSb8hsfLQZjw8Y9DN9yKLigBnSxbF2gSGKXfLHYTAaEZ6PTZhEfEaVmaYrPZOLB/gI9ufMx7lwf5YPAq167fFHw0VF67ydXrt7Tyv7hxi6sXr3D10odcuXKNP/7il6xYtpzs7OwhwosXL6I+9+59y//9fP3Nd5V/w59vs/PZZ7UsTiN8++23ta7PP78j+FyI73P37l0N9+/f5/bt29y5c0fs98T2Dd+ouH+Pf976jK///qX2bn9/P5kPCC9fvqwZv/rqK7744osfiVHJvv32Eeo/+Qt8+S+tumvnTjIkv9Sur8bGRjo7O2ltbaWtre17UG3t7e0aftjX1i79LS10d3drKXVRUdHQKYeHh6PX638E1R4REUGkJKAP2v9rXFRUlJZvawrj4+NJTEzUUt4fIikpSSvV/uTk5EeOUaEm/+r2aXuYnp6uJd4PkvMfQp1QJTZL6vxwEv+gLyYmhizJ0bUlq+yqVPVvIC8vj/z8/O9BtRUWFmqD1fqjoP6WlJaWair/A/iLLXs1YiRFAAAAAElFTkSuQmCC')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"弹幕墙\",\n    \"title\": \"弹幕墙\",\n    \"src\": \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png\",\n    \"srcSet\": [\"/static/458b449e3e1c28c1ee09e955e46aeabe/2c191/bullets.png 259w\", \"/static/458b449e3e1c28c1ee09e955e46aeabe/112e1/bullets.png 441w\"],\n    \"sizes\": \"(max-width: 441px) 100vw, 441px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u5F39\\u5E55\\u5899\"), \"\\n  \")), mdx(\"h3\", null, \"\\u8BC4\\u8BBA\\u8FC7\\u6EE4\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u795D\\u798F\\u5899\\uFF0C\\u6D89\\u53CA\\u5230\\u7528\\u6237\\u8F93\\u5165\\uFF0C\\u5982\\u679C\\u9700\\u8981\\u6CE8\\u518C\\u767B\\u5F55\\u5C31\\u592A\\u9EBB\\u70E6\\u4E86\\uFF0C\\u4E0D\\u9700\\u8981\\u767B\\u5F55\\u6CE8\\u518C\\u7684\\u8BDD\\uFF0C\\u4E07\\u4E00\\u6709\\u4EBA\\u60F3\\u8981\\u6076\\u5FC3\\u6216\\u8005\\u4F7F\\u574F\\uFF0C\\u53D1\\u5E03\\u70B9\\u810F\\u8BDD\\u4EC0\\u4E48\\u7684\\uFF0C\\u6CA1\\u6CD5\\u63A7\\u5236\\u3002\"), mdx(\"p\", null, \"\\u4F7F\\u7528\\u7684\\u624B\\u6BB5\\u662F \\u3010\\u533F\\u540D\\u767B\\u5F55\\u3011 + \\u3010\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\u8FC7\\u6EE4\\u3011\\uFF1A\"), mdx(\"p\", null, \"\\u533F\\u540D\\u767B\\u5F55\\uFF1A\\u4F7F\\u7528\\u7684 BaaS LeanCloud \\u7684\\u6570\\u636E\\u5B58\\u50A8\\u7CFB\\u7EDF\\uFF0C\\u91CC\\u9762\\u5305\\u542B\\u4E86\\u533F\\u540D\\u767B\\u5F55\\u7684\\u903B\\u8F91\\uFF0C\\u533F\\u540D\\u767B\\u5F55\\u540E\\u57FA\\u672C\\u4E0A\\u80FD\\u62FF\\u5230\\u4E00\\u4E9B\\u5F88\\u57FA\\u672C\\u7684\\u4FE1\\u606F\\uFF0C\\u9650\\u5236\\u5355\\u7528\\u6237\\u53D1\\u5E03\\u9891\\u7387\\uFF0C\\u914D\\u5408 UA\\u3001IP \\u6536\\u96C6\\uFF0C\\u4E5F\\u53EF\\u4EE5\\u5C06\\u591A\\u6B21\\u53D1\\u5E03\\u7684\\u795D\\u798F\\u8054\\u7CFB\\u8D77\\u6765\\uFF0C\\u81F3\\u5C11\\u77E5\\u9053\\u7279\\u5B9A\\u7684\\u67D0\\u4E2A\\u4EBA\\u53D1\\u4E86\\u54EA\\u4E9B\\uFF0C\\u4E00\\u4E2A\\u5355\\u9875\\u8FD9\\u6837\\u7684\\u624B\\u6BB5\\u4E5F\\u8DB3\\u591F\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8BC4\\u8BBA\\u5173\\u952E\\u8BCD\\uFF1A\\u5728\\u7F51\\u4E0A\\u627E\\u4E86\\u4E00\\u4E2A\\u7B80\\u5355\\u7684\\u654F\\u611F\\u8BCD\\u5E93\\uFF0C\\u4E00\\u5343\\u591A\\u4E2A\\u810F\\u8BDD\\u3001\\u8272\\u60C5\\u3001\\u653F\\u6CBB\\u7B49\\u654F\\u611F\\u8BCD\\uFF0C\\u7136\\u540E\\u7528\\u5FEB\\u626B\\u7684\\u5F62\\u5F0F\\u5224\\u65AD\\u7528\\u6237\\u8F93\\u5165\\u662F\\u5426\\u6709\\u7981\\u7528\\u8BCD\\uFF0C\\u5982\\u679C\\u6709\\u7684\\u8BDD\\u4FDD\\u5B58\\u7684\\u65F6\\u5019\\u8BBE\\u4E3A\\u4E0D\\u53EF\\u7528\\uFF0C\\u8FD9\\u6837\\u5C31\\u4E0D\\u4F1A\\u663E\\u793A\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4E86\\uFF0C\\u540E\\u7EED\\u5982\\u679C\\u5B58\\u5728\\u8FD9\\u4E9B\\u6570\\u636E\\u8FD8\\u80FD\\u770B\\u5230\\u548C\\u54EA\\u4E2A\\u533F\\u540D\\u8D26\\u53F7\\u76F8\\u5173\\u8054\\uFF0C\\u7B80\\u5355\\u5224\\u65AD\\u662F\\u8C01\\u4E0D\\u5B89\\u597D\\u5FC3\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u6700\\u540E\"), mdx(\"p\", null, \"\\u9879\\u76EE\\u672C\\u8EAB\\u7528\\u4E86\\u51E0\\u5929\\u65F6\\u95F4\\uFF0C\\u7528\\u4E86\\u5F88\\u591A\\u7B2C\\u4E09\\u65B9\\u7684\\u5E93\\uFF0C\\u52A0\\u4E0A COS \\u548C LeanCloud \\u540E\\u7AEF\\u670D\\u52A1\\u7684\\u914D\\u5408\\uFF0C\\u6574\\u4E2A\\u5F00\\u53D1\\u6D41\\u7A0B\\u6CA1\\u90A3\\u4E48\\u590D\\u6742\\u3002\"), mdx(\"p\", null, \"\\u6700\\u6709\\u611F\\u89C9\\u7684\\u662F\\u6BCF\\u6B21\\u8C03\\u8BD5\\u7684\\u753B\\u9762\\u90FD\\u662F\\u81EA\\u5DF1\\u548C\\u7231\\u4EBA\\u7684\\u7F8E\\u7167\\uFF0C\\u611F\\u89C9\\u8FD8\\u662F\\u5F88\\u4E0D\\u4E00\\u6837\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u5FAE\\u4FE1\\u5F00\\u653E\\u5E73\\u53F0\\u4E0D\\u5410\\u4E0D\\u5FEB\"), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u7684\\u4F20\\u64AD\\u90FD\\u5728\\u5FAE\\u4FE1\\u4E0A\\uFF0C\\u6240\\u4EE5\\u539F\\u672C\\u60F3\\u5728\\u795D\\u798F\\u5899\\u4E0A\\u4F7F\\u7528\\u5FAE\\u4FE1\\u7684\\u6570\\u636E\\uFF0C\\u81F3\\u5C11\\u62FF\\u5230\\u6635\\u79F0\\u548C\\u5934\\u50CF\\uFF0C\\u8BA9\\u4EB2\\u4EBA\\u90FD\\u6709\\u70B9\\u53C2\\u4E0E\\u611F\\uFF0C\\u4F46\\u662F\\u6700\\u540E\\u7684\\u7ED3\\u679C\\u5F88\\u8BA9\\u6211\\u611F\\u89C9\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u7684\\u65E0\\u529B\\u3002\"), mdx(\"p\", null, \"\\u66FE\\u7ECF\\u7528\\u8FC7\\u5FAE\\u4FE1\\u516C\\u4F17\\u53F7\\u548C\\u5C0F\\u7A0B\\u5E8F\\uFF0C\\u53EF\\u80FD\\u662F\\u5FD8\\u4E86\\u600E\\u4E48\\u88AB\\u652F\\u914D\\u7684\\u4E86\\u3002\\u521A\\u5F00\\u59CB\\u7684\\u7B80\\u5355\\u641C\\u7D22\\u6280\\u672F\\u6587\\u6863\\u9636\\u6BB5\\uFF0C\\u5404\\u4E2A\\u6587\\u6863\\u5982\\u679C\\u82B1\\u4E86\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u4F60\\u81F3\\u5C11\\u8FD8\\u80FD\\u6478\\u5230\\u95E8\\u9053\\uFF0C\\u660E\\u767D\\u3010\\u670D\\u52A1\\u53F7\\u3001\\u8BA2\\u9605\\u53F7\\u3001\\u5C0F\\u7A0B\\u5E8F\\u3001\\u4F01\\u4E1A\\u5FAE\\u4FE1\\u3011\\u548C\\u3010\\u5FAE\\u4FE1\\u516C\\u4F17\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5F00\\u653E\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u7A0B\\u5E8F\\u5E73\\u53F0\\u3011\\u3001\\u3010\\u5C0F\\u6E38\\u620F\\u5E73\\u53F0\\u3011\\u7684\\u533A\\u522B\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u4E2A\\u4EBA\\u6CE8\\u518C\\u8D26\\u53F7\\u7684\\u65F6\\u5019\\u4E3A\\u4EC0\\u4E48\\u6BCF\\u4E2A\\u5E73\\u53F0\\u90FD\\u8981\\u5355\\u72EC\\u7528\\u6CA1\\u6709\\u5173\\u8054\\u8FC7\\u5176\\u4ED6\\u5E73\\u53F0\\u751A\\u81F3\\u4E0D\\u80FD\\u5173\\u8054\\u4E2A\\u4EBA\\u5FAE\\u4FE1\\u7684\\u8D26\\u53F7\\u6CE8\\u518C\\uFF0C\\u5C1D\\u8BD5\\u4E86\\u4E09\\u56DB\\u4E2A\\u90AE\\u7BB1\\u624D\\u6CE8\\u518C\\u6210\\u529F\\u3002\"), mdx(\"p\", null, \"\\u7136\\u540E\\u518D\\u7FFB\\u7FFB\\u5B98\\u65B9\\u6587\\u6863\\u51E0\\u4E2A\\u5C0F\\u65F6\\uFF0C\\u5927\\u6982\\u660E\\u767D\\u6211\\u9700\\u8981\\u7684\\u51E0\\u4E2A\\u63A5\\u53E3\\u5728\\u54EA\\uFF0C\\u9700\\u8981\\u540E\\u53F0\\u670D\\u52A1\\u5668\\u3001\\u5B89\\u5168\\u57DF\\u540D\\u3001\\u5B89\\u5168 IP\\u3001\\u56DE\\u8C03 URL \\u7B49\\uFF0C\\u660E\\u767D access_token\\u3001OpenID\\u3001UnionID\\u3001scope\\u3001jsapi_ticket \\u7684\\u7B7E\\u540D\\u7B97\\u6CD5\\u3002\\u6700\\u540E\\u7684\\u6700\\u540E\\uFF0C\\u5C1D\\u8BD5\\u7F16\\u7A0B\\u7684\\u65F6\\u5019\\u8FD8\\u6CE8\\u610F\\u5230\\u4F60\\u5FC5\\u987B\\u83B7\\u5F97\\u63A5\\u53E3\\u6743\\u9650\\uFF0C\\u4E0D\\u7136\\u90FD\\u6CA1\\u529E\\u6CD5\\u4FEE\\u6539\\u4E00\\u4E2A\\u5206\\u4EAB\\u94FE\\u63A5\\u3002\"), mdx(\"p\", null, \"\\u6211\\u80FD\\u591F\\u770B\\u5230\\u5B98\\u65B9\\u6709\\u591A\\u52AA\\u529B\\u8BA9\\u6574\\u4E2A\\u5F00\\u53D1\\u8005\\u7684\\u4F53\\u9A8C\\u66F4\\u597D\\uFF0C\\u4F46\\u662F\\u53EF\\u80FD\\u662F\\u5E73\\u53F0\\u786E\\u5B9E\\u5F88\\u5927\\u3001\\u5F00\\u53D1\\u8005\\u592A\\u591A\\u3001\\u7BA1\\u7406\\u8D77\\u6765\\u6BD4\\u8F83\\u56F0\\u96BE\\uFF0C\\u5BFC\\u81F4\\u6574\\u4E2A\\u4F53\\u9A8C\\u4E00\\u8A00\\u96BE\\u5C3D\\u3002\\u518D\\u52A0\\u4E0A\\u5927\\u5927\\u5C0F\\u5C0F\\u7684\\u516C\\u53F8\\u6574\\u5929\\u7167\\u7740\\u8FD9\\u4E9B\\u6587\\u6863\\uFF0C\\u53D1\\u7740\\u5404\\u79CD\\u5404\\u6837\\u7684\\u56FD\\u5185\\u7279\\u8272\\u7684\\u6559\\u7A0B\\uFF0C\\u5BFC\\u81F4\\u60F3\\u8981\\u89E3\\u51B3\\u95EE\\u9898\\u975E\\u5E38\\u66F2\\u6298\\u3002\"), mdx(\"p\", null, \"\\u6700\\u540E\\u5404\\u79CD\\u65B9\\u6CD5\\uFF0C\\u90FD\\u8981\\u6C42\\u60A8\\u7684\\u8D26\\u53F7\\u5FC5\\u987B\\u8BA4\\u8BC1\\uFF0C\\u4F01\\u4E1A\\u4E3B\\u4F53\\u7684\\u8BA4\\u8BC1\\u8D39\\u7528 300 \\u5757\\uFF0C\\u4E2A\\u4EBA\\u4E3B\\u4F53\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF01\\uFF01\\uFF01\\u6211\\u8BF7\\u95EE\\u5982\\u679C\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u6CA1\\u529E\\u6CD5\\u8BA4\\u8BC1\\uFF0C\\u6CA1\\u529E\\u6CD5\\u83B7\\u53D6\\u5230\\u90A3\\u4E9B\\u6743\\u9650\\uFF0C\\u8FD9\\u4E2A\\u5F00\\u53D1\\u8005\\u5E73\\u53F0\\u662F\\u5E72\\u561B\\u7ED9\\u4E2A\\u4EBA\\u6CE8\\u518C\\u7684\\u5462\\uFF1F\\uFF1F\\u610F\\u601D\\u5C31\\u662F\\u7528\\u7528\\u6D4B\\u8BD5\\u8D26\\u53F7\\u5457\\uFF1F\"), mdx(\"p\", null, \"\\u516C\\u4F17\\u53F7\\u5E73\\u53F0\\u7684\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u53EA\\u80FD\\u53D1\\u53D1\\u6587\\u7AE0\\u3002\\u5F00\\u653E\\u5E73\\u53F0\\u7684\\u4E2A\\u4EBA\\u5F00\\u53D1\\u8005\\u8D26\\u53F7\\u4E00\\u70B9\\u7528\\u6CA1\\u6709\\u3002\"), mdx(\"p\", null, \"\\u6D6A\\u8D39\\u4E86\\u751F\\u547D\\u4E2D\\u7684\\u5F88\\u591A\\u4E2A\\u5C0F\\u65F6\\u624D\\u5F04\\u6E05\\u8FD9\\u4E2A\\u4E8B\\u60C5\\uFF0C\\u6700\\u540E\\u5FAE\\u4FE1 jssdk \\u4E00\\u70B9\\u4E5F\\u6CA1\\u6CD5\\u7528\\uFF0C\\u4FEE\\u6539\\u4E0B\\u5206\\u4EAB\\u51FA\\u6765\\u7684\\u94FE\\u63A5\\u7684\\u56FE\\u6807\\u90FD\\u4E0D\\u53EF\\u80FD\\uFF0C\\u4E00\\u4E2A\\u6309\\u7167\\u6807\\u51C6 web \\u89C4\\u8303\\u505A\\u7684\\u9875\\u9762\\uFF0C\\u5728\\u5FAE\\u4FE1\\u91CC\\u9762\\u50CF\\u662F\\u4E00\\u4E2A\\u4E09\\u65E0\\u7684\\u5C71\\u5BE8\\u7F51\\u7AD9\\uFF0C\\u975E\\u5E38\\u8BA9\\u4EBA\\u6C14\\u6124\\u65E0\\u8BED\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}